° Textbook of 


Graphics Designing 


Grade - X 


Textbook of 
GRAPHICS DESIGNING 


Grade — X 


National Vocational and Technical Training Commission 
H-9, Islamabad 


Author: 


Reviewers: 


Edition: 
ISBN: 
Publishers: 


Dr. Faisal Riaz, Associate Professor, Department of Computer Sciences, 
Mirpur University of Science and Technology 


Saba Sadiq, DACUM Facilitator, Islamabad 

Dr. Muhammad Idrees, Curriculum Expert, Islamabad 

Tahir Mehmood, Assistant Prof. FCE, Islamabad 

Marryum Zaman, Lecturer Computer Graphics, NUTECH, Islamabad 
Muhammad Zubair Akhtar, CEO, GoogleBiz, Faisalabad 

Bilal Mehmood, Lab Engineer, NETECH, Islamabad 

Mubashar Chishtee, CEO/Lecturer, Coding Phonix 

Ali Raza, Game Developer/Project Manager, Rawalpindi 

Shehmir Riaz Bhatti, Game Developer/Project Manager, Technophile 
Solution, Rawalpindi 

Sadia Saeed, Senior Designer, Gyaan-e-Sehar Foundation 
Muhammad Asim, Assistant Director, NAVTTC 

Hoorya, Lecturer, WW&DC 


Designing: Gul Awan Printers, Blue Area, Islamabad. 


Test Edition, 2022 


National Vocational & Technical Training Commission 
H-9, Islamabad. 
Website: www.navttc.gov.pk, 


All rights are reserved with the National Vocational and Technical Training Commission. No 
part of this book can be copied, translated, reproduced or used for guide books, key notes, 
helping books etc. without permission of NAVTTC. 


PREFACE 


This book has been written to fulfill the requirements of Matric-Tech course to prepare the students for the 
subjects of Graphics Designing in Grade 10. Matric-Tech in Graphics Designing and Media Production 
has been introduced first time in Pakistan. The main objective of starting this technical course is to 
produce technical workforce instead of teaching them conventional theoretical subjects. On accomplish- 
ment, students will be able to explore the job market easily as well as start their careers as freelancers. 
Efforts have been made to present graphics related training material in one book. 


This book covers major topics to enrich students with the knowledge of Graphics Designing. Each subject/ 
topic is clarified in a helpful manner for better understanding of Matric-Tech students. The book starts 
with the software programs which are being used in the field of graphics. We have explained all the major 
tools with their implementations on various objects for better understanding. Students must perform the 
activities and tasks to get hands on experience to learn Graphics Designing in a batter way. All sections 
incorporate evaluations in the form of MCQs, exercise short and long questions. Any enhancement/idea 
for the improvement of this book will be highly appreciated. 


Executive Director 
National Vocational & Technical Training Commission 
(NAVTTC) 


Instructions for Teacher 


Cover the essentials of visual design, theory and practical examples described in the relevant 
chapters. 

A great way of starting graphics design studies is to review the history of graphics design. 

Give an overview of the most influential ideas within the world of design from the 19th and early 
20th centuries, highlighting key ideas and providing valuable insights. 

Go beyond theory and focuse on designers that shaped history, sharing their stories important 
work, development of design, mid-century design, corporate branding, typography, magazine 
design and 

Create challenging design exercises in the classroom. Ask students to design creative things. 
Have students to draw their name as supposed to write it. Teach them how to draw each letter 
separately describes iconic posters.make up his own cartoon character, first outlining and 
drawing it and then filling it in with color.and how to create shadow effects. Ask them to integrate 
a picture with his name that he feels best himself. 

Ask studnets to choose the most suitable graphics software keeping in view the nature of job. 
Every software program is not designed to do all kinds of work. These are specific to tasks. 

Tell students about different specification of different software e.g. Photoshop, Illustrator, 
InDesign, XD. 

Freelancing & Enterpreneurship are now evolving business models in modern world. 

Involve students in enterpreneurship & freelancing. 
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Chapter 1: 


Inpage 


After completing this section, the students will be able to: - 
¢ define InPage 

¢ describe purpose of InPage 

* define Home Screen 

¢ describe the menu bar, property bar, status bar 


1.1 Introduction 


InPage is a word processor and page layout software for languages such as Urdu, Balochi, Persian, Pashto 
and Arabic under Windows and Mac which was first developed in 1994. It is primarily used for creating 
pages in the language of Urdu, using the Nasta ‘liq ( oe ) (hanging' calligraphic) style of Arabic script. 
InPage is a standard Urdu publishing tool and is widely used on PCs where the user wishes to create their 
documents in Urdu, using the authentic style of Nastaliq with a vast ligature library (more than 20,000), 
while keeping the display of characters on screen WYSIWYG (What-You-See-Is-What-You-Get). Overall, 
this makes the on-screen and printed results more 'faithful' to hand-written calligraphy than all or most other 
Urdu software on the market. This is achieved while keeping the operation easy, akin to that of earlier 
versions of standard English Desktop Publishing packages such as QuarkXPress and Adobe InDesign.. 


1.2 Interface 


Homescreen 


Homescreen in Inpage is something you will 
instantly see when you open the program. As can be 
seen in Figure 1.0, The homescreen of inpage is 
similar to many other graphics realted application 
where the user gets options to open an old file or 
create a new one. 


Columns 


Margins 


210x297 mm Left: [127mm 
210mm Right: ft 2.7mm Gutter: 
Height: [297mm Top: [127mm [4.23mm =) 


Orientation Bottom: [127mm JV Automatic Text Box 
@ Portrait Direction l” Double Sided 
© Landscape [ [- Facing Pages 


© Left To Right 


Pages: |1 =1 || Right To Left Save as Default | 


Figure 1.0 
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Menu Bar 


It is always on the top of the window. As can be seen in (Figure 1.1), It provides a user with multiple 
options to interact. You can click on File,Edit, View, Format, Insert, Symbols, utilities, Language, 
Window, or Help and a dropdown menu will appear giving you options all relating to the menu 
name. For example, all the options in File have to do with your documents, such as opening, 
creating, saving, printing, and so forth. 


D File Edt View Foon incet Symbols Undies Language Window Help 


ESET ofrecer 2) fee Jae 


Figure 1.1 


Status Bar 

Status bar is located on the botton left corner of Inpage, 
It shows the current opened page out of all the pages 
and a zoom bar which is used to zoom in or out of the 
page. 


Figure 1.2 
Property Bar 


Property bar is located right below the Menu bar, it contains all the properties related to the content 


on the art board which includes Font name, size, color, outline, width and many other options to 
be explored as can be seen in figure. 


Figure 1.3 
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After completing this section, the students will be able to: - 


¢ use of Nastaliq truetype font. 
¢ use of arabic and decorative font 


* knowing font sizes & text alignments 
¢ understand mixing urdu, arabic, farsi, sindhi and english in the same document 


¢ define typography and using type in in-page 
* import & exports for different file extensions 


1.3 Using fonts in Inpage 

In order to change the default font of 
a text, Just like other you’ll have to 
select the text and click on font 
name in property bar. Then select 
the desired font and the text’s font 
suppose we use Nastaliq font, and it 
will be changed as can be seen in 
figure. 


Figure 1.4 


Similarly if you want to use any —— ; [Lele 
other font suppose arabic font the 
steps will be same, Select the text 
and the in property bar select the 
arabic font and it’ll be changed as can 
be seen in figure. A 5 Eh! 


1.4 Font size and Alignment of 
text: 

In order to change the font size of a 
text, Just like other apps you'll have 
to select the text and click on font 
number in property bar. Then select 
the desired number and the text’s |= 
font size will be changed. As can be 
seen in figure. 


Figure 1.5 


LL Powered! by; WWW.SOHATL786.COM 


Similarly to change the alignment 
of the text you’ll have to select the 
text, then choose the desired 


Figure 1.6 
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alignment available which is either centered, left, right, or justified, in property bar as shown in 
figure below. 


ee = ce 


Figure 1.7 


[Trad Arabic = | | Black >| [==] [None . 
220 200 180 160 


1.5 Mixing different fonts 

Suppose if you want to mix different fonts 
in same document the steps are very 
simple, Select the part of the document you 
want to changethe font of, and change the 
font as explained above. 


Example we have a text written in Urdu, 
1- Select the first word from the text. Figure 1.8 

2- Change the font of the text document. ra 
3- Select the 2nd word from the text and 
apply different Font for example Arabic. 


To type English in Inpage press “Ctrl + Space- 
bar” in the bottom right corner you’ll see a 
word “EN” written which allows you to 
type english freely. 


Figure 1.9 


1.6 Typography 


Typography is the art and technique of arranging type to make written language legible, readable 
and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, 
line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters 
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1.7 Import and Export files 
To import and export files in Inpage you’ll have to click on Files in Menu Bar and then click on 
import or use the shortcut key for windows which is Ctrl+Y. as can be seen in figure below: 


© Urdu InPage 2012 - [---Please Save the File---1] 
s&s File Edit View Format Insert Symbols Utilities Language Window Help 


[Nov New... CT |) a | | 
[E] Open... Creo | [eex —~i[= flee) 

Close CONt FE acetate ntntntnteletnstntntnlntetntatebtatetetnlatete 
Re Save... Ctrie+S 

Save As... Ctrl+Alt+S 

Collect For Output... 


Hello Worl 


Place... 


Import... Ctrie¥ 


Export. Ctri+Alt+\ 


lalaltels 


Export Page... 
Print... Ctri+P 
Exit Alt+F4 


Gloiatatera 


Figure 1.10 


Similarly to export a file you need to save the file first then click on files in the Menu Bar and click 
on import or use the shortcut key for windows which is Ctrl+Shift+yY . 


EXERCISE 


Q#1 Select the most suitable option. 


1. InPage is a word processor and page layout software for languages such as 


a) Urdu b) Pashto c) Balochi d) All of these 
2. Inpage is widely used on , 

a) Mobile b) Laptop c) PC d) Both b and c 
3. Authentic style of Nastaliq with a vast ligature library are ‘ 

a) More than 20,000 b) More than 40,000 c) More than 50,000 d) None of these 
4. Menu bar is located at the of the window. 

a) Top b) Bottom c) Left d) Right 


Section-II | Basic Concepts of InPage 


5. We can change the color, outline, size from : 
a) Menu bar b) Status bar c) Property bar d) Homescreen 


6. To write english in Inpage you must press 


a) Alt + F4 b) Ctrl + Spacebar c) Shift + Enter d) Ctrl + Alt 
7. Typography is the art and technique of type. 
a) writing b) reading Cc) arranging d) typing 


8. Shortcut key for import is : 
a) Ctrl +1 b) Ctrl +E c) Ctrl + Y d) Ctrl + X 


9 Shortcut key for export is : 
a) Ctrl + alt +I b) Ctrl + esc +E c) Ctrl + Shift + Y d) Ctrl + X 


10. Which of the following is used to write urdu? 
a) Calibri b) Noor c) Nastaliq d) Arial 


Q#2 Answer the following questions briefly. 


1. Define Inpage and its usage. 

2. What is homepage and menu bar of Inpage? 

3. What is Status Bar and Property Bar of Inpage? 

4. Define Property Bar of Inpage. 

5. How do you select font in Inpage. 

6. How do you align and change font on the Text in Inpage. 

7. What is status bar view button in Inpage ? 

8. How to export a file in Inpage also what is the shortcut for it. 
Q#3 Write answers of the following questions in detail. 


1. Explain the interface of Inpage. 
2. Define typography and explain steps of applying different fonts on the same text. 


ACTIVITIES 


1. Write an application in urdu using Inpage. 
2. Design a timetable for your class in tabular format. 
3. Design a brochure of your college in Inpage. 


ee 


After completing this section, students will be able to: - 
¢ define production and printing 
¢ understand printing requirements 
¢ define how to prepare files for printing 
* learn about resolution. 
¢ describe color management setting, image proofing on screen 


2.1 Production and Printing 

Production is the process of making, harvesting or creating something or the amount of 
somethingthat was made or harvested while Printing is a process for mass reproducing text and 
images using an image, copy or a template.There are two main things which are required for 
printing; 1- A Print-Ready file which is a term used to describe a file that has all the specifications 
necessaryto produce high-resolution printed output, without requiring any additional alteration or 
intervention.2- A printer which suits the print you want which can be either Black and White or 
Colored print. 


2.2 Printing Requirements 

There are two main things which are required for printing; 

1- A Print-Ready file which is a term used to describe a file that has all the specifications necessaryto 
produce high-resolution printed output, without requiring any additional alteration or intervention. 

2- A printer which suits the print you want which can be either Black and White or Colored print. 


2.3 Preparing files for printing 

1. Save files as PDF, TIF, JPG or EPS files.The preferred option is saving your file as a high 
quality PDF. This preset will ensure optimumsettings for color, fonts and resolution management. 
For EPS files, ensure all fonts and links are embedded. Fonts may be converted to outlines. When 
working with an image file, TIF or JPG files are good choices. TIF files can be saved withou 
tcompression for a slightly better resolution quality. JPG files are commonly used, but can producea 
slightly blurry proof due to pixel compression. 

2. Use CMYK instead of RGB. Professional presses produce full-color printing or CMYK (cyan, 
magenta, yellow, and black) color, but computers use RGB (red, green and blue) on-screen. This 
means that the colors on your screen will be RGB, but must be converted to CMYK beforeprinting 
on an offset printing press. Many times this will not cause issues, but sometimes, the twocolor 
systems will clash.We recommend starting off with a CMYK canvas to allow for the least amount 
to color shift from your original to your proof.If you can’t do that, it is best to make the switch to 
CMYK before submitting your artwork. This way you can verify that the colors all transfer 
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accurately. You can switch to a CMYK palette quite easily in Photoshop by changing the “Color 
Mode” option to CMYK Color. 

3. The colors on your monitor will not match exactly. The colors on your printed piece may 
notexactly match the colors on your monitor. Color can vary for a number of reasons from 
monitor to monitor, and will therefore vary from the final printed colors.If a precise color is crucial 
to your final output, order a hard copy proof. This will not only put yourmind at ease, but also give 
you the opportunity to make any necessary changes before the final printing. 

4. Set the image resolution to 300 dots per inch. Your starting images should be 300 dpi at full 
size. Enlarging an image will reduce the resolution which will result in poor image quality. 


2.4 Resolution 

Resolution is a measure used to describe the sharpness and clarity of an 
image or picture. It is oftenused as a metric for judging the quality of 
monitors, printers, digital images and various other hardware and 
software technologies Image resolution is typically described in PPI, 
which refers to how many pixels are displayed per inch of an image. 
Higher resolutions mean that there are more pixels per inch (PPI), resulting 
in more pixel information and creating a high-quality, crisp image. Images 
with lower resolutions have fewer pixels, and if those few pixels are too 
large (usually when an image is stretched), they can become visible like 
the image below. 


2.5 Color Management 

Working in prepress holds a unique challenge. BNSie)RU ile) Reel is ise) tera 
Even if your color workflow is tight, 5K 768 
everything can fall apart if the customer’s file 
isn’t color managed. 

We’ve all seen it. You receive a file that the 
customer claims is ready to print, yet when 
you open it on your computer, the colors 
don’t look right at all. You can’t send it to 
print without knowing for sure, because 
you’re the one who will take the hit for ta (40F6%2160 
wasted time and materials if it’s wrong. Figure 2.1 
How colors are managed 

A color-managed workflow will help all of your devices speak the same color language so they can 
share accurate color information.Each device you use to capture and create digital images uses 
slightly different CMYK or RGB formulas to create the same color. Digital cameras, scanners and 
displays use the additive color model, rely on different gamuts,and vary between manufacturers. 
Printers can be RGB or CMYK and use a variety of different inks and papers. When you’re 
using an application like AdobePhotoshop® or InDesign® to prepare images and files, you need 
to set them up to handle color management, too. 
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There are four key steps in setting up a color-managed workflow, which we call the four Cs of 
color management. 

Step 1: Consistency First, you must ensure your devices are capable of producing consistent 
colors. If your monitor’s color is brighter on the left side than the right, or your proofing printer 
can’t produce consistent color from start to finish, then there’s not much color management can do 
to help. You need a new one. 

Step 2: Calibration Once you know your device is capable of reproducing consistent color, you 
need to bring it back into specification. Device color will drift over time, and calibration re-adjusts 
everything to achievethe best possible gamut. 

Step 3: Characterization Next, you should use a color measurement instrument, such as a 
colormeter or spectrophotometerto determine the device’s color reproduction characteristics. Even 
identical devices built on thesame day from the same manufacturer will have slight variations in 
color. Characterization will optimize the settings for the best image reproduction on that particular 
device.When characterizing a monitor, software flashes a series of known RGB values on screen, 
and thecolor measurement device measures them. To characterize a printer, print a test chart with 
anywherefrom a few to thousands of color samples and measure them with the color measurement 
device. 

X-Rite printer profiling color management workflow Measuring a test chart to profile a printer 
with X-Rite’s 11Pro 2. 

The collected color data is compared with sample colors and used to create an ICC profile, which is 
basically a three-dimensional map, or color space, of all of the colors the device can capture 
display or print. It describes the specific characteristics of the device so that other devices know 
which color language it is speaking. 

Step 4: Conversion is the process of moving color data from the color space of one device to the 
color space of another. These controlled conversions take place in a working space. Think of it like 
an airline hub — a common place to connect workflows. 


2.6 Image proofing 

Image proofing is the process of reviewing images to 
check their accuracy. It provides a simulation of the 
final print job so the color can be adjusted if 
necessary. There are two methods of proofing: 


Soft proof: it simulates the final print on a monitor, applying an ICC profile provided by the 
printing bureau. Ideally, the monitors used for the soft proofing must comply with ISO 12646 and 
be correctly calibrated. Also, the visualization environment must be lit according to ISO norm 3664 
Hard proof: it consists of a test print, usually on the target format (size). This print is then 
visualized on a CIE Standard [luminant cabin, which provides an even daylight equivalent light 
source. 
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After completing this section, Students will be able to: - 


¢ differentiate CMYK and RGB 
* convert image to CMYK for commercial printing 
* convert image to different formats 


2.7 RGB vs CMYK 

What is RGB? 

RGB is all about seeing the light. 
Computer screens show color in images, text, and designs with different combinations of red, green, 
and blue light. This is where RGB comes from. Therefore, anything designed for a screen from 
smartwatches to a jumbotron should be designed in RGB color mode. Screens display images with 
hundreds of pixels. Each of those pixels has three sub-pixels: a red light, green light, and blue light 
These sub-pixels light up in different intensities based on the color the pixel ultimately displays 
to produce a result on a black monitor. 

Pixels come together to display the words and images that you see. 

RGB values are displayed in a range between 0 - 255, LR | G B 
meaning that there are 256 levels of each of the three colors 


(red, green, and blue) that can be combined together to 255 0 0 
create a color on the spectrum between black and white. This 

means that there are over sixteen million possible colors in the 0 69 100 
RGB color mode. That’s a lot of options. 

For example, the RGB value for the color black is: 255 255 0 
K:0:G: 0B: 0 


This means that there is 0% red light, 0% green light, and 0% 0 255 0 
blue light. In other words, there is a complete absence of light, 


resulting in black. To create white, a designer should input: 0 0 955 
R:255 G: 255 B: 255 

This is the highest possible value of each color, meaning that —_ jg, 51 255 
red, green, and blue lights are 100% bright, resulting in the 

maximum presence of light: white. Figure 2.2: 


RGB Values for Common Colors 
What is CMYK? 
Not everything we design can be put in front of bright lights. Therefore, designs that are intended 
for print should be designed in CMYK mode. 
The name CMYK comes from the four colors that make up the model: cyan, magenta, yellow, and 
key. Key represents the color black. Since “B” is taken by “blue” in the RGB model, the last letter 
of the word “black” is used instead of the first. 
Black is used in this color mode because even the purest combination of cyan, magenta, and yellow 
(all lighter colors) cannot create a fully black color. 
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CMYK uses subtractive colors, not additive. Adding 
colors together in CMYK mode has the opposite effect 
on the result as RGB does; the more color added, the c M iN! 
darker the results. Therefore, colors are taken away, or 
subtracted, to create a light result. 

This is because the CMYK colors absorb light, 
meaning that more ink results in less light. 

Combining cyan, magenta, and yellow will create a deep 


% % % % 


0 84 80 90 


Oo 
oO 
_ 
oO 
Oo 
oO 


brown. 

It isn’t until key (black) is added that color is removed  jg9 0 100 0 
completely. 

The CMYK values are measured in percentages, referr to jgg 100 9 0 
the image below. For example, to make the CMYK color 

white, the values should be entered into the design 99 52 0 34 
software as: 

C: 100% M: 100% Y: 100% K: 100% picpherns 


CMYK Values for Common Colors 
2.8 Converting an Image to CMYK 
CMYK Printing is an additive color process utilizing ink or 
toner. RGB is a subtractive color process that is based on 
light. When you add physical layers of colored ink on top 
of each other, they mix one way. When you add layers of 
colored light together, they mix in a completely different way. 
For example in the image below you can see that when all of 
the RGB colors add together in the middle of the RGB 
diagram, white is created. When all of the CMYK colors 
add together, they create Key (Black). 
Illustrator 
You must ensure that you are setting the color mode to 
CMYK while creating a new document. To create a new 
document, navigate to File > New. 
Before saving your PDF, download and install Printing 
Center USA’s Color Profile and Adobe PDF Preset here. |, 
Instructions are included in the download. After doing CMYK Color 
this, navigate to File > Save As. In the Save As window, 
name your file and change the file type to PDF. Click Save. 
This will ensure that your PDF is coming with 
PrintingCenterUSA’s specific G7-Certified ICC Profile, 
which is the most you can do to maintain color accuracy. Default 
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Photoshop 

Photoshop is not only good for saving your PDF files in 
CMYK, but also for converting your images to CMYK. To Photoshop 
create a new CMYK document in Photoshop, go to File > 
New. In the New Document window, simply switch the 
color mode to CMYK (Photoshop defaults to RGB). If 
you’re wanting to convert an image from RGB to CMYK, 
then simply open the image in Photoshop. Then, navigate to 
Image > Mode > CMYK. 


Inches 


Pixels/Inch 


2.9 Converting Image to different formats 

To convert a file in different formats you need to open the file 
in any graphics software e.g illustrator, CMYK Color 
then: - 

1- Click Save As.... The Save Image window will pop up. fa 
2- In the name field, change the file extension to the file 

format you want to convert your image to The file extension 
is the part of the file name after the period. 

For example, to convert a JPEG (.jpg) file into a Bitmap file Waianae iene: ed bie mate 
(.bmp): 

original file: image.jpg 
new file: image.bmp Figure 2.5 


3- Click Save, and a new file will be saved in the new format. The old file (in the old format) 
will remain where it was, and will not be deleted. 

The image viewer tries to guess which file format to save a picture in based on the file extension 
you 
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After completing this section, Students will be able to: - 


¢ define types of papers. 

¢ size of paper for different print media. 

¢ learn about paper weightage used for different print media. 
¢ learn about color printing papers (matte, glossy). 


2.10 Types of Paper 
Paper, the types, sizes, thickness and finish; it can all become a little complicated. 


Deciding on the paper type can sometimes be the hardest choice for this whole process, so to help you we’ve 
provided a list of types along with a description of each. 


Bond paper 

This type of paper is stronger and more durable than the average sheet of 
paper. Instead of being made from low grade wood pulp, it is mostly made 
up of rag pulp. It’s perfect for letter heads, typed reports and envelopes As 
can be seen in figure. 


Figure 2.6 
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Gloss coated paper 

Gloss paper is typically used for flyers and brochures as it has 
a high shine. As the ink dries well there is no need for a seal 
varnish as the ink does not rub off, As shown in figure. 


Matt coated paper 

Matt paper is the opposite to gloss — it is coated with a matt 
finish to produce a paper that isn’t shiny, preventing glare. This 
type of paper is perfect for reports, flyers and leaflets. As can 
be seen in figure. 


Figure 2.7 


Figure 2.8 


Recycled paper 

Made from re-used paper products, recycled . 

paper is perfect for those who are trying to reduce . 
their environmental impact. It can be used for © 
most documents including reports, memo paper 
and forms. As can be seen in Figure 2.9 


Figure 2.9 


Watermarked paper 

Used in high quality paper watermarked paper give a feel of luxury 
and high quality. To create its desired effect an impression is 
pressed into the paper by attaching a wire pattern. This type of 
paper is commonly used as a security feature for important 
documents, including exam certificates, refer to the figure. 


Figure 2.10 
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2.11 Sizes of Paper 
The table below provides the dimensions of each paper size. So whether you just need to know the size, 
name or measurements, use the below chart for a quick reference. 


Table of Paper Sizes from AO to A10 


Size Width x Height (mm) Width x Height (in) 


AO 841 x 1189 mm 334 x 46.8 in 
Al 594 x 841mm 23.4 x 33.1in 
A2 420 x 594 mm 16.5 x 23.4 in 
A3 297 x 420 mm 11.7 x 16.5 in 
A4 210 x 297 mm 8.3 x 11.7 in 
AS 148 x 210 mm 5.8 x 8.3 in 
A6 105 x 148 mm 41 5.8 in 
A7 74 x 105 mm 2.9x 41 in 
As 52 x 74mm 2.0 x 2.9 in 
AQ 37x52 mm 1.5 x 2.0 in 
A10 26 x 37mm 1.0 x 1.5 in 
Table 1.0 


Finally once you’ve decided on the type and size of paper, the thickness is the final stage. Weight value of paper 
is measured in gsm (grams per square metre). The higher the gsm the better quality and feel of the paper. 


. oo. Weight Feels Similar to: 
2.12 Paper Weight Descriptions ee cai ict ielaaceit 
Standard paper weights are between 75gsm and ; he 
90 gsm Mid-market magazine inner pages 


100gsm for common business applications; 
photo paper is much higher and goes up to 130-250 gsm A good quality promotional poster 


280gsm in weight. 180-250 gsm _ _—_— Mid-market magazine cover 
350 gsm Most reasonable quality business cards 
Table 1.1 
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After completing this section, Students will be able to: - 


¢ learn about portfolio 
¢ learn about branding 


2.13 Portfolio 

A portfolio is a purposeful collection of a person 

work that exhibits a person’s effort, progress, 

achievements and competencies. 

e A portfolio may include a reflective account 
of a practice placement, presentation, 
learning experience or group experience. The 
person is able to: 

e Accumulate and store evidence (in one 
central online area) of the many transferable 
skills persons develop. 

@ Self assess and monitor their own learning 
and development. 

© Develop and present a portfolio of work or 
reflective account on an aspect of person’s 
learning as part of course assessment. 

© Build a resume for employment applications and as evidence of learning achievements for a professional 
body. 

e Apply for jobs by showing evidence of relevant work experience and suitable 21st century skills. 

We can referr the below figure as an example of portfolio: 


Figure 2.11 


2.14 Branding 

According to American Marketing 
Association, Brand is a name, term, 
design, symbol, or any other feature that 
identifies one seller’s good or service as 
distinct from those of other sellers. 

To illustrate the definition of a product and 
the role it occupies in defining branding, 
we will use the example of water: 

Water is a free resource that every human 
being needs to live and survive. Yet it Figure 2.12 
became a product the day humans and 


companies started to commercialize it, for example by selling mineral water in glass and plastic bottles as 
can be seen in figure. 

But water always looks the same, isn’t it? It is liquid and transparent. So, how can different companies sell 
the same product but still convince people to purchase their bottled water instead of the one from the 
competitor. 
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The answer is: by creating a brand. 

Let’s illustrate this again with our water 
example. The products being sold is water, 
but in order to convince people to purchase 
a particular water, companies developed 
different water brands. 

And each one of these brands provides a 
different meaning to the product water: 

1— Evian makes you feel young 

2— Perrier is refreshing, bubbling 
3— Fiji Water is pure, healthy and natural Figure 2.13 


EXERCISE 


Select the most suitable option. 


1. What is the preferred file extension to prepare a file for printing 


a) TIF b) JPG c) ESP d) PDF 
eA file ensure all fonts and links are embedded 

a) TIF b) JPG c) ESP d) none 
3. professional presses produce file in 

a) RGB b) CMYK c) Gradient d) none 
4. A starting image resolution should be dots per inch 

a) 100 b) 200 c) 300 d) 400 
5. Image resolution typically described in 

a) DPI b) PPI c) Pixels d) sharpness 
6. Resolution is used to describe the of an image 

a) Sharpness b) Clarity c) Size d) none 


7. image with lower resolution have 
a) Fewer pixels b) Crispiness c) Low quality d) none 


8. Black color RGB Value is 


a) 0, 0, 0 b)255, 255, 255 c) 150,150 150 d)100, 100, 100 
9. CMYK uses colors 
a) Additive b) Subtractive c) Multiplicative d) none 
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10. What is the best paper for letterheads and typed reports ? 


a) Bond paper b)Matt coated paper c) Gloss CoatedPaper d) Watermarked Paper 
11. What is the preferred file extension to prepare a file for printing ? 

a) TIF b) JPG c) ESP d) PDF 

12. According to American Marketing Association, brand identifies ‘ 

a) service b)seller C) price d) both a and c 

13. Water becomes a product when companies it. 

a) waste b) drink c) sell d)commercialize 


14. Portfolio includes reflective amount of : 
a) purchases b)skills Cc) practice d) both b and c 


15. Portfolio is a purposeful collection of a person’s ‘ 
a) food b) work c) profile d) purachses 


Answer the following questions briefly. 

1. Why is resolution important? 

2. Describe image spoofing with its types. 

3. What are it’s uses of watermarked paper. 

4. Write down atleast 4 types of paper sizes along with their measurments? 
5. What is Bond paper, for what purpose it is used ? 

6. Define portfolio.7. Define matte coated paper. 


Write answers of the following questions in detail. 

1. What is meant by Production and Printing ? also describe how to prepare a file for printing. 
2. What is color management and how do you manage the colors. 

3. Differentiate the RGB and CMYK in detail. 

4. What are different types of papers? 

5. Describe Portfolio. 

6. Describe Branding. 


ACTIVITIES 


1. Prepare a brochure for printing using CMYK mode. 
2. Design a letterhead for a company. 
3. Prepare PS file for printing and for uploading on social media as per required color mode.. 
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After completing this section, Students will be able to: - 
¢ understand working with masks and channels 


¢ understand quick mask 
¢ define manipulation of images with puppet warp, vanishing point 


¢ define alpha channel to create a shadow 


3.1 How to Create a Channel and Mask 


To create a new alpha channel, Go to channels panel by clicking on the tab to the right of the Layers tab. If 
you’re following along and don’t see this tab, you can go up to the Window > Channels menu item and click. 
After selecting that item, the New Channel dialog will appear. Inside this dialog. Keep things the way they are 
and click the OK button to move forward. 


Figure 3.0 oe Figure 3.1 
After clicking the OK button, the dialog box will disappear and I'll left with a new element in the Channels 
panel. The thumbnail will be black and it’ll be located directly below the other channels. Also, the visibility 


will be turned off by default. 
; : 


Figure 3.2 Figure 3.3 
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To turn the visibility for this channel ON and OFF, In the dialog box come alive and then disappear again. 
In this case, since the overlay value was red and 50%, see a semi-transparent red overlay. 

If this image was to be saved out as a JPEG file or something else, there would be no evidence of this maskat 
all. Think these things as tools for use inside of Photoshop. In the sections below, what they can do .Use 
brush Tool to draw a squiggly line in white right on the image.Right on top of this alpha channel. 

That looks like what happens when you draw on a mask in white. That’s because it is. To prove it, View the 
alpha channel thumbnail. It’s black with a white line drawn on it. 


Figure 3.4 


3.2 Quick Mask 

To use Quick Mask mode to create and edit selections 
quickly, start with a selection and then add to or 
subtract from it to make the mask. You can also create the a 
mask entirely in Quick Mask mode. Color differentiates the 
protected and unprotected areas. When you leave Quick 
Mask mode, the unprotected areas become a selection. 
1- Using any selection tool, select the part of the image 
you want to change. 

Click the Quick Mask mode button in the toolbox. 

2- A color overlay (similar to a rubylith) covers and 
protects the area outside the selection. Selected areas are 
left unprotected by this mask. By default, Quick Mask 
mode colors the protected area using a red, 50% 
opaque overlay. (Referrence in figure 3.6) 


‘Channels x 


> =i 
- — 


Figure 3.6: A. Standard mode B. Quick Mask mode C. Selected pixels appearas white in channel thumbnail 
D. Rubylith overlay protects area outsideselection, and unselected pixels appear as black in channel 
thumbnail. 

3- To edit the mask, select a painting tool from the toolbox. The swatches in the toolbox automatically become 
black and white. 

4- Paint with white to select more of an image (the color overlay is removed from areas painted with white) 
To deselect areas, paint over them with black (the color overlay covers areas painted with black). Painting 
with gray or another color creates a semitransparent area, useful for feathering or anti-aliased effects. 
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Figure 3.7: A. Original selection and 
Quick Mask mode with green chosen 
asmask color B. Painting with white 
in Quick Mask mode adds to the 
selection 

5- Click the Standard Mode button in the 
toolbox to turn off the quick mask and 
return to your original image.A selection 
border now surrounds the unprotected 
area of the quick mask. 

6-If a feathered mask is converted to a 
selection, the boundary line runs halfway 
between the black pixels and the white 
pixels of the mask gradient. The 
selection boundary indicates the 
transition between pixels that are less 
than 50% selected and those that are 
more than 50% selected. 

7-Apply the desired changes to the 
image. Changes affect only the selected 
area.Choose Select > Deselect to 
deselect the selection. 


3.3 Manipulating Images 
Puppet Warp 

1-Select your desired layer in the Layers 
panel. 

2-Choose Edit Puppet Warp. 

3-On the Options bar, specify your 
desired settings: 

4-On your image, click to add a pin to an 
area you want to distort or anchor. 
5-Drag a selected pin to warp the mesh 
as can be seen in figure 3.8. 

6- After you warp to your desired 
result, press Enter (Return on the Mac) 
or click the check icon on the Options 
bar. 


Original Selected pin Mesh 


3.4 Vanishing Point 

Vanishing Point simplifies perspective- 
correct editing in images that contain 
perspective planes for example,the sides 
of a building, walls, floors, or any 
rectangular object. In Vanishing Point, 


Figure 3.8 
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you specify the planes in an image, and then apply edits such as painting, cloning, copying or pasting, and 
transforming. All youredits honor the perspective of the plane you’re working in. When you retouch, add, 
or remove content inan image, the results are more realistic because the edits are properly oriented and scaled 
to the perspectiveplanes. After you finish working in Vanishing Point, you can continue editing the image 
in Photoshop. Topreserve the perspective plane information in an image, save your document in PSD, 
TIFF, or JPEG format. 


3.5 Vanishing Point dialogue 


overview 

The Vanishing Point dialog box (Filter > 
Vanishing Point) contains tools for defining « 
the perspective planes, tools for editing the 
image, a measure tool, and an image 
preview. The Vanishing Point tools 
(Marquee,Stamp, Brush, and _ others) 
behave similarly to their counterparts in ° 
the main Photoshop toolbox. You canuse 
the same keyboard shortcuts to set the 
tool options. Opening the Vanishing Point 
menu displaysadditional tool settings and 


td ef a Cs) 
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commands. 

1-Choose Filter > Vanishing Point. ‘ 

2-Define the four corner nodes of the plane Figure 3.9: A. Vanishing Point menu B. Options 
surface. C. Toolbox D. Preview of vanishing point session 
By default, the Create Plane tool is E. Zoom options 


selected. Click in the preview image to 

define the corner nodes. Try to use a rectangle object in the image as a guide when creating the plane. 

To tear off additional planes, use the Create Plane tool and Ctrl-drag (Windows) or Command-drag (Mac 
OS) an edge node. 


um ¥ =a 
Figure 4.3: Defining the four corner nodes Figure 3.12: Ctrl-drag (Windows) or Command- 
with the create plane tool drag (Mac OS) an edge node to tear off plane 
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3- Edit the image. 

Do any of the following: 

Make a selection. Once drawn, a selection can be cloned, moved, rotated, scaled, filled, or transformed. 
Paste an item from the clipboard. The pasted item becomes a floating selection, which conforms to the 
perspective of any plane that it’s moved into. 

Paint with a color in Vanishing Point or Paint with sampled pixels in Vanishing Point. 

Scale, rotate, flip, flop, or move a floating selection. Measure an item in a plane. 

Measurements can be rendered in Photoshop by choosing Render Measurements 

To Photoshop from the Vanishing Point menu. 

4- Export 3D information and measurements to DXF or 3DS format. 


3.6 Alpha channel to create a shadow 


To create a shadow, you want to essentially duplicate that 
mask and then shift it. You'll use an alpha channel to make 
that possible. 

1- In the Layers panel, Ctrl-click (Windows) or 
Command-click (Mac OS) the layer icon in the Model layer. 
The masked area is selected. oi ms 
2-Choose Select > Save Selection. In the Save Selection . oom 
dialog box, make sure New is chosen in the Channel menu. = = 
Then name the channel Model Outline, and click OK. meas 
Nothing changes in the Layers panel or in the image 

window. However, a new channel named Model Outline 
has been added to the Channels panel. 

4-With the Shadow layer selected, choose Select > 
Refine Edge. In the Refine Edge dialog box, move the 
Shift Edge slider to +36%. Then click OK. 

5-Choose Edit > Fill. In the Fill dialog box, choose Black 
from the Use menu, and then click OK. 

The Shadow layer displays a filled-in black outline of the 
model. Shadows aren’t usually as dark as the person that 
casts them. You’ll reduce the layer opacity. 

6-In the Layers panel, change the layer opacity to 30%. 
The shadow is in exactly the same position as the model, 
where it can’t be seen. You’ ll shift it. 

7-Choose Select > Deselect to remove the selection. 
8-Choose Edit > Transform > Skew. Rotate the shadow by 
hand, or enter -15° in the Rotate field in the options bar. 
Then drag the shadow to the left, or enter 845 in the X field 
in the options bar. Click the Commit Transform button 
(Image) in the options bar, or press Enter or Return, to 
accept the transformation. 

9-Choose File > Save to save your work so far. 


Shadow 


&O O.8 3 a 


Figure 3.12 


Figure 3.13 
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After completing this section, Students will be able to: - 


¢ define primary, secondary, and tertiary colors 

¢ understand color harmony 

¢ understand color combinations and meaning of colors 
¢ understand RGB vs CMYK 


3.7 What are primary, secondary and tertiary colors? 


Red, blue and yellow are the primary colors, and they are the base of 
every other color. They cannot be created by mixing other colors 
together. 

Secondary colors result when two primary colors are mixed together; 
they include orange, green and purple. 

Tertiary colors are created when a primary color is mixed with a 
secondary color. Examples of tertiary colors are blue-green, red-orange 
and yellow-green. 

White and black are not technically colors, but they can be used to 
create lighter or darker (tints or shades) colors. For example, 
combining white and red makes pink, and blending black with orange 
makes brown. 


Do you know ? 
Sir Issac Newtom invented/ established color theory when he invented color wheel in 1666. 


Color Harmony 
In color theory, color harmony refers to 


the property that certain aesthetically Complementary Split-Complementary Analogous 
pleasing color combinations have. 


These combinations create pleasing 
contrasts and consonances that are said 
to be harmonious. These combinations 
can be of complementary colors, 


split-complementary colors, color 
triads, or analogous colors. Color 


harmony has been a topic of extensive Triadic Tetradic Square Monochromatic 
study throughout history, but only since 


the Renaissance and the Scientific 
Revolution has it seen extensive 
codification. Artists and designers make 
use of these harmonies in order to 


achieve certain moods or aesthetics. 


Color Harmony examples are Figure 3.14 
discussed below: (Referr to figure 
3.14) 
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Complementary 

Complementary color schemes are the most 
basic of all harmonies. They’re often used in 
the world of design because of their 
simplicity. 

Put simply, complementary pairs are colors 
positioned on opposite ends of the color 
wheel (or color circle), and they can be either 
primary, secondary, or tertiary colors. 

These harmonious color combinations create 
vibrant color palettes with high contrast. 
While that’s desirable. 

For instance, text and background in 
complementary colors are tough to read, so 
steer away from that. 

Further out, these color schemes are ideal for 
making something stand out and create 
eye-catching elements. 

Split complementary 

Split complementary colors are slightly more 
complex than complementary colors because 
they have three hues. 

The simplest split complementary color 
schemes have one key color and two colors 
adjacent to that key color’s complement. 
Because of that, this color harmony has a 
vibrant contrast that is generally easy to use. 
Beginner artists and graphic designers often 
gravitate toward these types of combinations 
as they start to branch out into more complex 
color schemes since they’re approachable 
and intuitive. 

Beyond that, split complements work 
exceptionally well with artwork since it 
gives you enough colors to work with. 

Also, it’s easy to understand how to use them: 
use the two base colors for most of the artwork 
and the accent color for — you guessed it — 
accents. 

Analogous color 

Analogous color schemes consist of three 
hues, all positioned next to each other on 
the color wheel. 

They usually consist of one dominant color, 
then a supporting color. The third color can be 
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Do you know ? 


Color wheel is divided into warm colors and cool colors. Warm colors 
include red, orange and yellow along with it’s variations. Whereas cool 
colors include green,blue and purple along with it’s variations. Each color 
has separate meaning. 


Figure 3.17 
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the first two colors blended together or an 
accent color that pops. 
Analogous color schemes are widespread in 
decorating and interior design. These color 
harmonies tend to be eye-soothing and have a 
sense of visual cohesion without being too flat, 
overwhelming, or monochromatic. 
Triadic color 

Triadic color combinations consist of three 
colors evenly spaced on the color wheel. They 
are very versatile and more often than not, 
they create a vibrant, bold color palette. 
Similar to complementary color schemes, : 
triadic color schemes offer strong contrast. Figure 3.18 
Still, they tend to be easier on the eye than a simple complementary pair, making them a pretty safe bet if 
you want more than one hue to play with, but don’t want to make quite as much of a splash as a complementary 
pair would. 
Tetradic color 
Tetradic color schemes have four individual 
colors: a key color and three more colors, all 
equidistant from the key color on the color 
wheel. 
This color harmony can also be referred to as 
a “double-complementary color scheme” 
because it consists of two complementary 
color pairs. 
Like any complementary scheme with a wide 
range of colors, the result is a vibrant palette 
rich with contrast. 
In fact, tetradic colors are some of the 
boldest, most vibrant color schemes in the 
designers’ toolkit. While that’s a great thing, it 
also means they should be used judiciously Figure 3.19 
and with caution. 
Square color 
Square color schemes consist of four colors spaced evenly around the color wheel. To create a square color 
palette, pick the key color to start with. Then identify the other colors that are equidistant from that color. 
You'll basically end up with two complementary pairs. 
This color harmony is very similar to the tetrad above, however, instead of a rectangular color scheme, it is 
a square color scheme. 
Beyond that, square color schemes are less common than some of the other color combination options 
which can provide an opportunity to utilize one and set your design, product, website, or piece of artwork 
apart from the pack. 
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Monochromatic color 

Monochromatic color schemes use a 
single base hue and extend the color 
scheme by using different shades, tones, 
and tints of that color family. 

The result is a complex and rich design very 
different from the common misconception 
that monochromatic color harmonies are 
dull and lifeless. 

When choosing your color schemes, make 
sure to add enough contrast in the shades to 
create visual interest. Also, don’t shine away 
from patterns and texture-they will add 
depth to your design. 

This color harmony is vibrant and 
eye-pleasing, so be sure to make the most 
of it. 


Figure 3.21 
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Do you know ? 
1- Hue stands for original color 
example red, blue etc. 
2- Shade: when we mix black 
color with original color, it results 
in shade example: red + black= 
Mehroon. 
3- Tint is a mixture of white color 
with original color for example: 
red + white= Pink. 
4- Tone is a mixture of grey with 
origin! color. 
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After completing this section, Students will be able to: - 


¢ understand bitmap image and vector graphics 

¢ define path and pen tool 

¢ understand use of custom shapes and importing a smart object. 
¢ understand color and depth to a shape using layer style 


3.8 Bitmap vs Vector 

Bitmap is mostly used to represent real life, where vector is generally used for more abstract images such 
as logos. The two formats are very different but the end results can, at times, be made to look similar; an 

abstract bitmap or a realistic looking vector is not uncommon. We have dicussed both Bitmap and Vector 
below: 

Bitmap Images 

Bitmap images are what most people think of when they think of a digital image. They are made up of a 
collection of bits that make up an image. If you have ever zoomed in on a photo to the point where it looks 
like a bunch of squares then you have seen a bitmap image. Below is a bitmap image with a magnified 
section to show what we mean. 


Bitmaps are larger than their vector counterparts, which along with the loss of image stability when zooming 
in are two of their main disadvantages. They are however a much simpler output and easier to create for the 
most part. 


Typical file formats of bitmaps include: bmp (outdated), eps, gif, jpg, pdf, psd, tiff, and png. 


Figure 3.22 
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Vector Graphics 

Vector Graphics are completely made up 
of mathematically defined points and 
interactions. Each line is made of either a 
collection of points with lines connecting all 
of the points, or a few control points 
connected by Bezier Curves. Most vectors 
use the latter method as it creates smaller 
file types and smoother looking images. 
Below is a vector image with the lines that 
make up the image beside it. 

Vector drawings are generally smaller files 
because they only contain data and not full 
images. Vector drawings can also be scaled 
without losing any quality, which makes Figure 3.23 

them ideal for company logos or other objects that need frequent resizing. They are much more difficult to 
output especially if you have many small objects included in your drawing. 
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3.9 Path in Photoshop 

While working in Photoshop, you can create paths from existing selections. You probably won’t use this 
option nearly as often as you use the option to turn a path into a selection, but the option is available. 

To create a path from a selection, follow these steps: 

1- Select the desired element in your image. 

2- With the selection marquee active, select Make Work Path from the Paths panel pop-up menu. 

You can also create a path from a selection by holding down Alt (Option on the Mac) and clicking the Make 
Work Path from Selection icon in the Paths panel. If you just click the icon without holding down Alt (Option 
on the Mac), you also make a path, but you bypass the dialog box. 

3- In the dialog box that appears, enter a Tolerance value. 

The Tolerance value controls how sensitive Photoshop is to the nooks and crannies in the selection when it 
creates the path: 


¢ The lower the value, the more sensitive it is, and the more closely the selection follows your path. 
¢ Too low a value, such as 0.5, may create too many anchor points. 


¢ Too high a value, such as 10 (the max), rounds out your path too much. Start with the default setting 
of 2.0 You can always tweak the path later. 
4- If the path is still showing, simply click in the gray area below the path names in the Paths panel. 
This action deselects the path. 
5- Select the work path in the Paths panel and select Save Path from the Paths panel pop-up menu. Name 
the path and click OK. 


3.10 Pen Tool 

The Pen Tool is located just above the Text Tool on the main Photoshop toolbar. As you can see from the 
fly-out menu, there are five features (options) to the Pen Tool. Directly below the Text Tool, you will see a 
White Arrow, this is the Direct Selection Tool (and if you hold down your mouse the Black Arrow appears 
which is the Path Selection Tool). 
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Photoshop is a pixel image editor. The 
Pen Tool creates an outline or path 
(vector shape) by using anchor points. 
These paths can be opened or closed 
and can be viewed in the Paths panel 
(which similar to the Layers panel) 
where each path can have its own 
layer. You can then make a selection 
from a path. 

This means that you are working 
non-destructively on your image 
which is always a good thing. These 
paths can be saved and re-edited over 
and over. So the time spent on a 
selection can be saved for future use or 
further refined at a later date. Figure 3.24 


3.11 Custom Shapes TT: 
1- Select a shape tool N 
From the toolbar, click and hold the Shape tool () group icon to : 
bring up the various shape tool options — Rectangle, Ellipse, [), * Bi Rectangle Too! 
Triangle, Polygon, Line, and Custom Shape. Select a tool for the @ Bllipse Too! 
shape you want to draw. ‘A Triangle Tool 
*  Drawa shape ©) Polygon Tool 
° Click and drag on the canvas with your selected shape tool YG 
to draw a shape. This automatically creates a new shape J custom shape Too 
layer in the Layers panel. 
¢ Hold the Shift key while drawing to make your shapes 
proportional. Figure 3.25 
With your shape layer selected, use the Move tool to move your shape around and reposition on the canvas. To 


easily scale, transform, or rotate your shape, choose Edit > Free Transform or press Control+T (Win)/ 
Command+T (Mac). 


3.12 Importing Shapes 

1- If you don't find a desired shape, click the gear icon in the 
Custom Shape picker panel and select Import Shapes option to 
import a desired shape from your saved files. You can also 
create and save a custom shape in your library. 


2- You can easily edit your Custom Shape Tool properties 2 Text Only 
directly from Shape Properties under the Properties panel. You SA yer aati 
can also use on-canvas Transform controls to transform a eae 
custom shape while keeping intact its shape properties. Append Default Shapes.. 


import Shapes. 
Export Selected Sha 


3- Click and drag anywhere in the canvas to draw your custom 
shape as can be seen in figure. 


Figure 3.26 
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Figure 3.27 


Color and Depth to a shape using Layers 
You can edit styles applied to a layer or create new styles using the Layer Style dialog box. 


=a 
———EE St re 
Blending Options: Default Blend Mode: c, 
* Screen v 
[=] Drop Shadow Opacity: } 75 
[=] Inner Shadow Noise: [ } ) 


secoadomatal e0 © (EEEEE i 


[©] Inner Glow 


[-] Bevel and Emboss Elements 


Technique: softer w 


SF eee ee eee ee 


Figure 3.28 
You can create custom styles using one or more of the following effects: 


¢ Drop Shadow: Adds a shadow that falls behind the contents on the layer. 

¢ Inner Shadow: Adds a shadow that falls just inside the edges of the layer's content, giving the layer a recessed 
appearance. 

* Outer Glow and Inner Glow: Add glows that emanate from the outside or inside edges of the layer's content. 

* Bevel and Emboss: Add various combinations of highlights and shadows to a layer. 

e Satin: Applies interior shading that creates a satiny finish. 

* Color, Gradient, and Pattern Overlay: Fills the layer's content with a color, gradient, or pattern. 

¢ Stroke: Outlines the object on the current layer using color, a gradient, or a pattern. It is particularly useful 
on hard-edged shapes such as type. 
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After completing this section, Students will be able to: - 

¢ know Game, mobile, and website UI designing 

¢ understand Different side scrolling parallax images 

¢ understand 2D game art and icons. 

¢ understand website navigation bar, slider sizes, and product images etc. creation 


3.13 Game Designing: , 
Photoshop can be used in field of gaming. For example: Character 
designing, UI design, Scene design. 

We’ ll design a character now step by step for a better idea. jpaahin. 


Step 1 \ 
Sketching the head then try this few different options and choose this , 3 
style. 
Step 2 — oo“, 
To turn the bunny into pixels, I started drawing the eyes directly in a i 
Adobe Photoshop. The sketch wasn’t used much other than for defining 
the style. 

If you’ve never done pixel art, you’ll want to create a New File in 
Photoshop and not make it very large—it can be 400 px by 400 px. 
You’ll want to work with a lot of zoom (like 700%) and use the Pencil 
Tool to draw one pixel at a time. recommend keeping a second window 
of the same file open at 100% or 200% zoom so you can cycle between tf [ 
the windows and you can check on progress without the zoom. 

Make the character about as small as it can be while maintaining it’s | | 

main features. That’s why the eyes are a good starting point. 

The eyes will simply be two lines, next to each other. Each eye is 3 px 
tall by 1 px across, and nearly black in color. 


Step 3 

With the eyes done, you can proceed with the nose of the bunny plus a [| [| [ [ 
few other details. It’s ok if the lines are simple for now. 

Step 4 

Now we can soften some of those lines. Also adding some teeth in front 


Figure 3.29 


Figure 3.30 Figure 3.31 


of the mouth, because bunnies have big front teeth. Figure 3.32 Figure 3.33 
Step 5 

Let’s give the mouth a smile. 

Step 6 

And let’s add ears. Right now they’re pointing straight up, and that 

could work also for this character, but we’ll bend them a bit. 

The ears are about as thin as possible, with just 1px for the inside and [ iL | | 
then the outline pixels on the sides. ye 

Step 7 

pe to finish the head, we’ll give the bunny a relatively big puffy Figure 3.34 Figure 3.35 
cheek. 
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3.14 Web UI Design 


Photoshop has been around for a very long time and many designers use it and know it well. That’s why 
they turn to it for creating designs and graphics. Photoshop has gained many web and UI design features 
over the past years, including artboards, paragraph/character styles, and improved web export options. 
Photoshop’s popularity is why you’ll continue seeing designers using this app for quite some time, even 
though there are other options such as Sketch and XD. 

Because Photoshop is a photo editor that has gained web/UI design features, it's not as intuitive and easy 
to design with as Sketch and Adobe XD. Those apps are more targetted for design, and therefore are easier 
to use. Once you know how to use Photoshop though, it is a very powerful app. 

Photoshop does not have features such as symbols (for reusing design components) or prototyping. While 
you can turn your Photoshop file into a clickable prototype with InVision, it’s not as easy to do as the integrated 
prototyping features found in Sketch and XD. We doubt Photoshop will add these features, especially now 
that they are focusing so heavily on Adobe XD. 


Of these three apps, Photoshop offers the best export options for pixel-based graphics. If you really need 
to control the quality and filesize of graphics, Photoshop is the best choice. 
Photoshop has integrated tools for creating animated GIFs, which you can’t do with either Sketch or XD. 


3.15 Parallax Images 


The idea of parallax design is simply an awareness of movement. More specifically, the word ‘parallax’ is used 
to describe the perception of distance between objects while moving along a line of sight. For example the 
objects nearest to you in space will seem to move quicker and more dynamically than “background” objects 
So parallax is just a measurement of the difference in position between 2 points from the viewer’s perspective. 
Since the objects aren’t really moving it’s just a type of illusion like 2D animation. 


Building onto this concept we now have a wide variety of design trends meant to replicate parallax movement 


One of the simplest ways to understand design is through example. Let’s take a glimpse into specific trends 
used to create parallax design features in website layouts. 


Great Examples of Parallax Scrolling 


Let’s start by covering a few good 
& bad examples and then delve asda sineheleeaiaceboain 

into more specific techniques of Ser c 

parallax design. Generally = | al 
speaking, a great parallax layout 
should tell a story. This doesn’t 
need to be in “once upona time” 
formatting but it should clearly 
illustrate the point you’re trying 
to make. 


Figure 3.36 
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3.16 Website Navigation bar 

The navigation bar, or nav bar, is a crucial 
element of web design, as it literally lets the 
user navigate through your site. It's perhaps 
the most important item in terms of UI/UX 
design, as a badly designed nav bar makes 
the experience of using your website clumsy 
and disengaging. Rather than just a map, you 
should think of your navbar as part of your 
overall web design and make sure it's not 
only at its best for functionality, but also 


display. 
Slider Bar 


Sliders in web design are one of the most 


controversial user interface units. 


Some 


people love them; some people hate them. 
The same goes to web developers: some 
imagine a_ website 
without them; others never use them. 
The main reason for such disagreement is 


developers cannot 


that while websites 


instruments for 


sliders 
displaying lots 


are great 


of 


information within small space, at the same 


time, 


they can be 


SEO-killers, 


user 


experience blunders, and destroyers of 
marketing strategies. Therefore, with such 
strong arguments for and against, using 
sliders in web design is always a case of 


personal preferences. 


In Photoshop, create a new document 
(Ctrl+N or Cmd+N on Mac OS) with a 
canvas size of 550x400px. 
If it’s locked, unlock the default Background 
layer so we can fill it with a color. Here’s 
how you do that: Double-click on the 
Background layer, which will open the 
New Layer dialog window. Just press the 
OK button to unlock the Background layer. 

Afterwards, fill the Background layer with a 
very light gray color (#ececec). 
Double-click on the Background layer to 
open the Layer Style window. In the Layer 
Style window, give our Background layer a 
Gradient Overlay layer effect using the 
image below as a guide for the effect’s 


settings. 


SERVICES 


GALLERY 


Gradient Overlay 


Texture 
Satin 


Color Overlay 


Pattern Overlay 


Stroke 


Make Default Reset to Default 


Figure 3.38 


Figure 3.39 


Figure 3.37 
Layer Style 
soi p> Gradient Overlay ( 
es |—_.Ok-__] 
eu — Gradient — 
Blending Options: Default Blend Mode: | Overlay : Cancel 
Drop Shadow 
Opacity, TST ——— 
inner Shadow New Style... 
Cert I] Ci neve 
Outer Glow (V Preview 
Style: | Linear . wv Abign with Layer a 
Inner Clow 
Bevel and Emboss Angie: @) fs —«d* = 
a ! Scale! ee [SYK 


Section-IV | UI Designing Page 34 


Chapter 3 | Adobe Photoshop-II 


Now we have a good, complementary Layer Style 
background for our slider: Ce pane — 
Step 2: Create the Slider Bar [eiending Options: Oxfauk | : 

. : eats Jae poet ates Biend Mode: | Normal : fff fff Cancel 
In this step, we'll make the slider bar, a | £8 Bree Shasow Opacity; [160] 

a . inner Shadow = New Style... 
horizontal rectangle that will be sort of aan fs ¢ ») 5" me cba ge ark 
the “track” of our slider control (which Inne Giow Distance: ee [7 ]px 
we’ll create later on). poking = [t _ mal 
To start, use the Rectangle Tool (U) and — = eee 

‘ 7 Quality 

draw a rectangle like on the image Satin 
below. Make sure that the Rectangle patie: a |) ne 

A radient Overlay voise: res [Q % 
Tool is set to Shape layers mode (you Eos = 

. ‘i { er Knocks Out Drop Shadow 

can set this at the Options bar at the Stroke eee) if nenee 
top). For the Color of the shape, use a 
gray color (#dddddd) — you can also 
set the Color of your shape at the 
Options bar. ! 
Double-click on the rectangle shape Figure 3.40 
layer to open up the Layer Style 
window. 


We'll give our rectangle shape layer 5 
layer effects: Drop Shadow, Inner 
Shadow, Outer Glow, Bevel and 
Emboss, and Color Overlay. Below 
are the settings for each of these layer 
effects. 

Set outer glow to #ffffff, Inner shadow 
to #000000, Bevel and Emboss to 
#fffff and the final product is: 

Step 3: Create the Slider Control 
Let’s make the slider control, which is 
what you’d slide left and right when 
interfacing with our slider user inter- 
face. 

Switch to the Rounded Rectangle 
Tool (U). In the Options bar, set the 
Radius to 2px. Also, set the Color to 
the gray color we used for the back- 
ground (#ececec). Use the Rounded 
Rectangle Tool to draw a square $< 
shape somewhere on top of our slider 

bar. 


Figure 3.41 


Figure 3.42 
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3.17 Product Images 

High-quality photography is important for developing a 
successful business, as many customers are convinced to 
purchase a product based on its photos alone. If your 
product photos look unprofessional or unappealing, 
customers may turn away from your online store entirely. 
Luckily, you don’t need to be a professional photographer to 
create great product photos. Photo editing software like 
Photoshop can enable you to improve any product image 
that you’d like to add to your online store. 

Removing the background is one of the most common product 
photo editing actions. That is why it is recommended to take 
photos on a white background to eliminate the tiresome Figure 3.43 


process of deleting objects from the background or decoloring it. 

Removing backgrounds from an image has many benefits. By doing so, you will help customers focus on 
the object in the photo without any distractions. There are many tools designed for removing the 
background. 

One of the most popular tools is the pen in Adobe Photoshop. This software also has a quick selection tool, 
namely “Select and Mask”. However, Photoshop does not give you full control, so the selection might not 
be precise. 

White Balance 

When taking a picture of your product, you should be careful and pay attention to minor details so that your 
photo won’t have a blue tinge. A picture’s white balance can be distorted due to the alteration of light conditions 
camera settings during the photo shoot, etc. If whites aren’t correctly represented in your image, you can adjust 
white balance with Photoshop. 

You also may need to correct the color balance of your image so that it will be identical to the color scheme 
of your product in real life. Apply the Curves Tool to achieve this. 

Contrast and Exposure 

By modifying the image contrast, you can brighten the light areas and darken the dark parts of a photograph. 
With this effect, the picture will look more distinct. Increasing the exposure will help to achieve a brighter 
picture. Decreasing the exposure will give you the reverse result — a darker picture. 

Tweaking Colors 

Some devices are not capable of capturing certain colors, such as neon, for example. So, you will need to tweak 
the photo’s colors to achieve the desired shade. This technique allows you to eliminate the effect of the 
washedout colors and make your pictures look natural and attractive. 
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After completing this section, Students will be able to: - 


¢ learn about low and high resolution 


¢ understand layer arrangement, smart filters, painting a layer, adding a background, 
using the history panel to undo edits and upscaling lowresolution images. 


3.18 Resolution 

Resolution is a measure used to 
describe the sharpness and clarity of 
an image or picture. It is often used 
as a metric for judging the quality of 
monitors, printers, digital images 
and various other hardware and 
software technologies. 

Image resolution is __ typically 
described in PPI, which refers to how 
many pixels are displayed per inch of 
an image. 

Higher resolutions mean that there 


Figure 3.44 


more pixels per inch (PPI), resulting in more pixel information and creating a high-quality, 


crisp image. 


Images with lower resolutions have fewer pixels, and if those few pixels are too large (usually 
when an image is stretched), they can become visible like the image. 


3.19 Layers Arrangement 


To change the order of layers and layer groups, do any of the 
following: 

e Drag the layer or group up or down in the Layers panel. Release 
the mouse button when you see a highlightedline at the position 
where you want to place the selected layer or group. 

e To move a layer into a group, drag a layer to the group folder . If 


the group is closed, the layer is placed at the bottom of the group. 


¢ Select a layer or group, choose Layer > Arrange, and choose a 
command from the submenu. If your selected item is in a group, 
the command applies to the stacking order within the group. If 
the selected item is not in a group, the command applies to the 
stacking order within the Layers panel. 

e To reverse the order of selected layers, choose Layer > Arrange > 
Reverse. These options appear dimmed if youdo not have at least 
two layers selected. 

° By definition, the background layer is always at the bottom of 
the stacking order. Therefore, the Send To Backcommand places 
the selected item directly above the background layer. 


Layers Channels Paths 
Q Kind - &@ @TH A 
Normal Opacity; 100% 
Lock: EH of > TY @ Ail: 100% ~ 

Be tayers 

isa Layer 3 

Rae Layer 8 

8 FY cunes1 


9, 
Be Background copy 
[ees] 


a Background copy 2 


Figure 3.46 
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Smart Filter 

1-Do one of the following: 

To apply a Smart Filter to an entire Smart Object layer, select the layer in the Layers panel. 

To constrain the effects of the Smart Filter to a selected area of a Smart Object layer, make a selection. 

To apply a Smart Filter to a regular layer, select the layer, and choose Filter > Convert For Smart Filters, 
and click OK. 

2-Do one of the following: 

Choose a filter from the Filter menu. You can choose any filter, including third-party filters that support 
Smart Filters, except Extract, Liquify, Pattern Maker, and Vanishing Point. 

Choose Image > Adjustments > Shadows/Highlight. 


3.20 Painting brush 

To better understand how layer masks work, let's try editing the the Acorn layer mask. We'll be using the 
Brush tool. 

1-Select the layer mask thumbnail in the Layers panel. In our example, we'll select the thumbnail next to the 
Acorn layer. 

2-Next, choose the Brush tool from the Tools panel, then set the Foreground Color to white. 

3-Click and drag your image to reveal areas in the layer. In this example, we're revealing more of the background 
by adding white paint to the layer mask. 


3.21 Adding a background Type Select Filter 3D View Window Help 
Whenever we open an_ image, 
Layer... CHEN 


Photoshop automatically places it on 


Copy CSS 
the Background layer. Duplicate Layer... el from Background... 
1-The first thing we need to do is Delete > ae — 
convert our current Background layer _ 


into a normal layer. To do that, go up . Figure 3.45 
to the Layer menu at the top of the 


screen, choose New, and then choose New Layer 

Layer from Background. Name: |LayerO 

Going to Layer > New > Layer from 

Background. 

This opens the New Layer dialog box. pooeey J None 

Leave the name set to "Layer 0" and Mode: { Normal Opacity:!100 ~ | % 
click OK to close out of the dialog . — a 
box: Figure 3.46 

If we look in the Layers panel, we see Lock: Bl o’ 2 & Fill: 100% | ~ 
that our Background layer is no 

longer a Background layer. It's now a = sae | 

normal layer named "Layer 0". So far, er? 


so good: 

2-Next, we'll add a new layer that 
will become our new Background 
layer. Click the New Layer icon at 
the bottom of the Layers panel: 


Figure 3.47 
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Photoshop adds a new blank layer named "Layer 1" above the image: 
3-Let's convert the new layer into a Background layer. Go back up to the Layer menu, choose New, and 
then choose Background from Layer: 


Lock: Ho” + @ Fill: 100% | ~ 


SRS 


S | Type Select Filter 3D View Window Help 


Layer... THN 
Copy CSS 
Duplicate Layer... Group... Ly 
Delete Group from Layers... 
Figure 3.48 Figure 3.49 


We see that Photoshop filled the 
Background layer with white. As we 
learned earlier, that's because 
Photoshop automatically fills the 
Background layer with our current 
Background color. In my case, it 
was white: 

Using History Panel to undo 
edits 

In Photoshop Elements, your 
options to undo your work provide 
you much more than reverting to 
the last view (as Undo typically 
works in other applications). The 
Undo command has been one of the 
most frequently used menu Figure 3.50 

commands in every program ps File Edit Image Layer Type Select Filter 3D View Window Help 
developed. You make a change to ft 6 > Mode: Normal me ‘ 
your document in Elements, and if (@Reaeewoteeec eee ne 

you don’t like it, you simply choose 
Edit Undo or press the keyboard 
shortcut Ctrl+Z (cmd+Z on_ the 
Macintosh) 


Layer 0 


Find Extensions on Exchange... 


+ 


Extensions 


3D 
Actions 
Adjustments 

Brush Settings F5 
Brushes 


Alt+F9 


Channels 
Character 
Character Styles 
Clone Source 


3.22 Using the Undo 


History panel 

Photoshop Elements takes the Undo 
command to new levels by offering 
you a panel on which all (well, 
almost all) your changes in an editing 
session are recorded and available for Figure 3.51 
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undoing at any step in an editing sequence. 
Each edit you make is recorded on the Undo History panel. To open the panel, choose Window Undo 
History. Make changes to your document, and each step is recorded on the panel. 


3.23 Up-Scaling Low-resolution images 
1. With Photoshop open, go to File > Open and 2. Go to Image > Image Size. 


select an image. Layer Select Filt 
Mode > 


Adjustments > 


Auto Tone CHL 
Auto Contrast CPHL 
Auto Color T#B 


Image Size... XSI 


Canvas Size... Ae 1 
Image Rotation > 
Crop 

Trim... 

Reveal All 


Figure 3.52 Figure 3.53 


image Size 
Pixel Dimensions: 17.2M 
Width: [3000 
Height: | 2000 _pixels —_ wi J 


Cancel 


Auto... 


3. An Image Size dialog box will appear like the one Document Size 
pictured below. width: |10 inches 2 
Height: |6.667 


Resolution: | 300 ] —— 


™ Scale Styles 
1 Constrain Proportions 
 Resample Image 
| Bicubic (best for smooth gradients) |] 


Figure 3.54 
Width: |600 (pixels ie (pixels ie Je — : 


Height: | 400 | pixels re] 
: \ } 


Auto... 
— Document Size: - 4. Enter new pixel dimensions, document size, or 
Width: | 8.333 (inches |i} ] resolution. 
8 


Height: [5.556 (inches [ay The original image is at 300ppi. Let's say that we 
want to put this image on our website, so we want 


Image Size | 


r— Pixel Dimensions: 703.1K (was 17.2M) 


Resolution: [72 beeiesinsioll it to be only 600 x 400 pixels and with a resolu- 
M Scale Styles tion of 72ppi. First, we can change the resolution 
@ Constrain Proportions by typing in 72 and then, we can change the pixel 
M Resample Image: dimensions by entering 600 x 400 as the width 

| Bicubic (best for smooth gradients) HA and height. 
Figure 3.55 
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After completing this section, Students will be able to: - 

¢ understand about timeline panel, creating new video project and animate text with key 
frame. 

¢ learn effects, transitions, audio effects, muting unwanted audio and rendering video. 
¢ recognize about gif timeline 


3.24 Timeline Panel 

To animate layer content in timeline mode, you set keyframes in the Timeline panel, as you move the 
currenttime indicator to a different time/frame, and then modify the position, opacity, or style of the layer 
content. Photoshop automatically adds or modifies a series of frames between two existing frames—varying 
the layer properties (position, opacity, and styles) evenly between the new frames to create the appearance of 
movement or transformation. 

For example, if you want to fade out a layer, set the opacity of the layer in the starting frame to 100% and 
click the Opacity stopwatch for the layer. Then move the current-time indicator to the time/frame for the 
ending frame and set the opacity for the same layer to 0%. Photoshop automatically interpolates frames 
between the start and end frames, and the opacity of the layer is reduced evenly across the new frames. 


1. Create a new document. 

Specify the size and background contents. Make sure the pixel aspect ratio and dimensions are appropriate 
for the output of your animation. The color mode should be RGB. Unless you have special reasons for 
making changes, leave the resolution at 72 pixels/inch, the bit depth at 8 bpc, and the pixel aspect ratio at 
square. 

Make sure the Timeline panel is open. If necessary, click the downpointing arrow in the middle of the panel, 
choose Create Video Timeline from the menu, and then, click the button to the left of the arrow. If the Timeline 
panel is in frame animation mode, click the Convert To Video Timeline icon in the lower-left corner of the 
panel. 

2. Specify the Set Timeline Frame Rate in the panel menu. 

Specify the duration and frame rate. 


3. Add a layer 

Background layers cannot be animated. If you want to animate content, either convert the background layer 
to a normal layer or add any of the following: 

A new layer for adding content. 

A new video layer for adding video content. 

A new blank video layer for cloning content to or creating hand-drawn animations. 

4. Turn on keyframing for a layer property. 

Click the triangle next to the layer name. A down-pointing triangle displays the layer’s properties. Then, 
click the stopwatch to set the first keyframe for the layer property you want to animate. You can set 
keyframes for more than one layer property at a time. 

6. Move the current time indicator and change a layer property. 

Move the current-time indicator to the time or frame where the layer’s property changes. You can do one or 
more of the following: 

Change the position of the layer to make layer content move. 

Change layer opacity to make content fade in or out. 
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Change the position of a layer mask to reveal different parts of the layer. 

For some types of animation, such as changing the color of an object, or completely changing the content 
in a frame, you need additional layers with the new content. 

7. Move or trim the layer duration bar to specify when a layer appears in an 
animation. 

8. Preview the animation. 

Use the controls in the Timeline panel to play the animation as you create it. Then preview the animation in 
your web browser. You can also preview the animation in the Save For Web dialog box. 

9. Save the animation. 

You can save the animation as an animated GIF using the Save for Web command, or as an image sequence 
or video using the Render Video command. You can also save it in PSD format, which can be imported into 
Adobe After Effects. 


3.25 Adding Effects to Video in Photoshop 
Once you open PS, you need to switch your layout to “motion,” which you’! find in the top-right corner of 


your screen. 

Graphic and Web 
Photography 
Painting 


Color Swatches 


heer 
Reset Essentials 


AO New Workspace... 
Delete Workspace... 


30 «ON 


Learn Libraries Adjustments 


Learn Photoshop 


Step-by-step tutorials directly in the app. Pick a 


Figure 3.56 


Once you’ve made this selection, a timeline should appear; click Create new sequence. 


Figure 3.57 
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Once you’ve exported your sequence from your NLE of choice, import your video into the Photoshop 
timeline by clicking Add media next to Layer 1. Delete the default blank layer, and move your clip to the 
beginning of the sequence. Depending on the length and other specifics of your clip, you can set the two 
markers at the top as in and out points to focus on a specific section. This is particularly useful if you’re making 
small adjustments and want to analyze specific frames. 


3.26 Audio tracks and controls 


Adjust Audio in Clicks 
Right-click audio clips to mute them, adjust volume, or fade in and out. 
Right-click video clips, and click the musical notes to adjust audio they contain. 


Create or Delete audio 

To the right of audio track names in the Timeline, click the musical notes . Then select Add Audio to 
place another clip on the track. 

Select an audio clip in the Timeline, and click the musical notes to the right of the track name. Then select 
Duplicate, Delete, or Replace Audio Clip. 

Video transitions 

Transitions create professional fade and cross-fade effects. Click the transitions icon in the upper left of the 
Timeline panel. Then choose a duration, and drag a transition type to the start or end of clips. (Place the 
transition between clips to cross-fade.) Drag the edges of the transition preview in the Timeline to precisely 
set in and out points. 


GIF Timeline 
Open the GIF and in the layer sectino you’ll be able to see the GIF timeline. 
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After completing this section, Students will be able to: - 
¢ understand layer groups to create button graphics 

* comprehend automation of multistep task 

¢ know designing with artboards 


Si a Layer groups to create button graphics 

To create a new layer or group using default options, click the Create A New Layer button or New 
Group button in the Layers panel. 

¢ Choose Layer > New > Layer or choose Layer > New > Group. 

¢ Choose New Layer or New Group from the Layers panel menu. 

¢ Alt-click (Windows) or Option-click (Mac OS) the Create A New Layer button or New Group 
button in the Layers panel to display the New Layer dialog box and set layer options. 

¢ Ctrl-click (Windows) or Command-click (Mac OS) the Create A New Layer button or New Group 
button in the Layers panel to add a layer below the currently selected layer. 


3.28 Automating a Multistep Task 

An action is a set of one or more commands that you record and then play back to apply to a single file or 
a batch of files. In this exercise, you'll use actions to color match, sharpen, and save the images you'll 
combine in a panorama. 

Using actions is one of several ways that you can automate tasks in Adobe Photoshop. 

Preparing to record an action 

You use the Actions panel to record, play, edit, and delete individual actions. You also use the Actions panel 
to save and load action files. First, you’ll open the Actions panel and open the additional files you’ll be 
using. 

1-Choose Window > Actions to open the Actions panel. 
2-In the Actions panel, click the Create New Set button a » [oaks 
(newset_butt.jpg). Name the new set My Actions, and click OK. Oly Gamus J 
3-Choose File > Open. In the Open dialog box, navigate to the the |—/— 
folder. Shift-select the psd files. Then click Open. ae lv Ca My Actions 


> Quadrant Colors 


3.29 Designing with Artboard Figure 3.59 


1-Create a new file in Photoshop. 
2-Select the Artboard option as the 
Document Type. 

3-Set the desired Artboard Size. 
4-Notlice that each artboard has its own 
layer in the Layers panel. 

5-As you design artwork, you can copy 
elements from one artboard to another. 


Figure 3.60 
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After completing this section, Students will be able to: - 
¢ define infographics 

¢ understand text and image manipulation 

¢ learn to exhibit the idea in different ways. 


3.30 Infographics 

Infographics (a clipped compound of "information" and "graphics") are graphic visual representations of 
information, data, or knowledge intended to present information quickly and clearly. They can improve 
cognition by utilizing graphics to enhance the human visual system's ability to seepatterns and trends. Similar 
pursuits are information visualization, data visualization, statisticalgraphics, information design, or 
information architecture. Infographics have evolved in recent years to be for mass communication, and thus 
are designed with fewer assumptions about thereaders' knowledge base than other types of visualizations. 
Isotypes are an early example of infographics conveying information quickly and easily to the masses. 
What is Photo/Text Manipulation? 

Photo and Text manipulations are changes digitally applied to photos or Texts for a certain effector aesthetic. 
These changes are typically done through a photo editing program, such as PhotoshopLet us manipulate a photo of 
deer. 


3.31 Create a surreal deer manipulation 
Open the image of the deer and extend the 
top part of the canvas. Sample the color of 
the sky and paint with a soft brush to cover 
them with the sample color.Open the dead 
tree images and use the Magic Wand Tool 
(W) and remove the white background. 
Refine the edge of your selection if necessary 
or use the Multiply blend mode technique to 
remove the background. Watch the video at 
the end of the article for more details.Place 
the dead trees on your canvas and try to Figure 3.61 
emulate the antlers of the deer. 

Repeat the process and create the right 
antlers. Add other details if you want. I added 
a nest anda bird sitting on the branches and 
some flying birds on the background. You 
can even create a heart shape or any other 
thing with the branches if you use the 
Puppet Warp Tool to bend the branches the 
way you want. 


Figure 3.62 
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EXERCISE 


Select the most suitable option. 


1. Adobe Photoshop is a software used for editing. 

a) Video b) Images c) Graphics d) Botha & c 
2.A raster graphic is a data structure that represents generally rectangular grid of pixels. 

a) dot matrix b) digits c) comples file d) square maze 


3. In vector graphics, points on a cartesian plane are connected by 


a) Joint b) Node c) lines and curves d) Polygon 
4. We can use photo to retouch out photograph. 
a) negative b) printed c) digital d) hard copy 


5. Quick Mask tool is a ; 
a) Mesh tool b) Selection tool d) Shape builder tool d) None of these 


6. Shortcut key for rectangular marquee tool is 


a)R b) Ctrl+R c)M d) Ctrl+M 

7. Lasso tool allows creating selection. 

a) Freehand b) Quick c) Diverse d) Botha & c 
8. Shortcut key for Burntool is ; 

a) B b)O ce) T d) B+T 

9. With the Burn tool, You can the pixels in the location of the brush stroke. 

a) Lighten b) Contoure c) Darken d) Beautify 

10- The history panel is a tool which creates a chronological view of everything you do while 
working. 

a) top-down b) down-top c) left-right d) right-left 
11- The shortcut key Ctrl+ Z is used for 

a) Zoom b) Delete c) Lasso d) Undo 

12- Straight line can be drawn using tool. 

a)Shape builder b) Pen c) Lasso d) Magic wand 
13. The Smudge tool simulates the effect you see when you drag finger through ; 

a) Water b) Wet paint c) Paper d) Reality 

14. There are ranges of Dodge tool 

a) Two b) Four c) Three d) One 
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Answer the following questions briefly. 

1. Create a channel mask on an image. 

2. What is a Vanishing Point? 

3. Describe Color Harmony in detail. 

4. Create a 2D Object using Pen Tool. 

5. Can we use photoshop to create userinterface (UI) of a website ? 
6. What do you know about resolution? 

7. Add effects and audio tracks to a video file. 

8. How to automate a Multistep ? 

9. Define Infographics. 

10. What is Photo/Text Manipulation ? 

11. What is the difference between bitmap and vector graphics ? 


Write answers of the following questions in detail. 

1. Describe the common features of Photoshop. 

2. What are primary, secondary and tertiary color ? also define harmony. 

3. Describe difference between complimentary and split complimentary colors. 


ACTIVITIES 


1. Prepare a brochure for printing using CMYK mode. 
2. Design a letterhead for a company. 
3. Prepare PS file for printing and for uploading on social media as per required color mode.. 
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After completing this section, Students will be able to: - 


¢ understand basic logo concepts 
¢ define logo types 
¢ describe golden ratio 


4.1 What is a logo? 

A logo is a symbol made up of text and images that identifies a business. A good logo shows what a 
company does and what the brand values are. 

Logo design is all about creating the perfect visual brand mark for a company. Depending on the type, a 
logo usually consists of a symbol or brandmark and a logotype, along with a tagline. 

What does a logo do? 

Perhaps the most fundamental function of a logo is giving your business a unique mark that differentiates 
your business or organization from other businesses. 


4.2 Types of Logo 

There are seven types of Logos which are explained below: 

1. Monogram logos 

Monogram logos or lettermarks are logos that consist of letters, usually brand initials. IBM, CNN, HP, 


HBO. They’re the initialisms of a 
few famous businesses with rather 
lengthy names. With 2 or 3 
characters to remember, they’ve a 
each turned to using their initials for 
brand-identification purposes. So it 
makes perfect sense for them to use 


monograms. 
2. Wordmarks Be a 

Similar to a lettermark, a wordmark 

or logotype is a font-based logo that 

focuses on a business’ name alone. 

Think Visa and Coca-Cola. VIS A (S 
Wordmark logos work really well 

when a company has a succinct and 

distinct name. Google’s logo is a 

great example of this. The name Figure 4.1 


itself is catchy and memorable so, 
when combined with strong typography, the logo helps create strong brand recognition. 


gl 
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3. Pictorial marks 


A pictorial mark (sometimes called 
brand mark or logo symbol) is an A 
icon—or_ graphic-based logo. It’s 
probably the image that comes to mind 
when you think “logo”: the iconic Apple 


logo, the Twitter bird, the Target 
bullseye. Each of these companies’ 
logos is so emblematic, and each brand 
so established, that the mark alone is instantly recognizable. A true brand mark is only an image. Because 
of this, it can be a tricky logo type for new companies, or those without strong brand recognition, to use. 
4. Abstract logo marks 


An abstract mark is a specific type of bp 
pictorial logo. Instead of being a 
recognizable image—like an apple or a 
bird—it’s an abstract geometric form 
that represents your business. A few 
famous examples include Like all logo 


symbols, abstract marks work really 
well because they condense your brand 
into a single image. 

5. Mascots 

Mascot logos are logos that involve an 
illustrated character. Often colorful, 
sometimes cartoonish, and most always 
fun, the mascot logo is a great way to 
create your. very own __ brand 
spokesperson. 

6. The combination mark 

A combination mark is a_ logo 
comprised of a combined wordmark or 
lettermark and a pictorial mark, abstract 
mark, or mascot. The picture and text 
can be laid out side-by-side, stacked on 
top of each other, or integrated together 
to create an image. Some well known 


Figure 4.2 
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Figure 4.3 


Figure 4.4 
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combination mark logos include Figure 4.5 
Doritos, Burger King and Lacoste. 
7. The emblem 


An emblem logo consists of font inside 
a symbol or an icon; think badges, seals 
and crests. These logos tend to have a 
traditional appearance about them that 
can make a striking impact, thus they 


are often the go-to choice for many Figure 4.6 
schools, organizations or government agencies. 


HARLEY-DAVIDSON 


Section-I | Logo design and Golden ratio 


Chapter 4 | Adobe Illustrator-II Ai 


4.3 The Golden Ratio 

The Golden Ratio describes the perfectly symmetrical relationship between two proportions. 
Approximately equal to a 1:1.61 ratio, the Golden Ratio can be illustrated using a Golden Rectangle. This 
is a rectangle where, if you cut off a square (side length equal to the shortest side of the rectangle), the 
rectangle that's left will have the same proportions as the original rectangle. 


So if you remove the left-hand square from the rectangle above, you'll be left with another, smaller Golden 
Rectangle. This could continue infinitely. Similarly, adding a square equal to the length of the longest side 
of the rectangle gets you increasingly closer to a Golden Rectangle and the Golden Ratio. 


This relates to the Fibonacci Sequence (0, 1, 1, 2, 3, 5, 
8, 13, ...), in which each term is the sum of the previous 
two. 

Plotting the relationships in scale provides us with 
what's known as a Golden Spiral. This occurs 
organically in the natural world. 
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4.4 Using Golden Ratio 

It's believed that the Golden Ratio has been in 
use for at least 4,000 years in human art and 
design. However, it may be even longer than that 
— some people argue that the Ancient Egyptians 
used the principle to build In more contemporary 
times, the Golden Ratio can be observed in 
music, art, and design all around you. By 
applying a similar working methodology, you 
can bring the same design sensibilities to your 
own work. Let's take a look at a couple of 
examples to inspire you in the figure 4.7. 

the pyramids. 

Ancient Greek architecture used the Golden 
Ratio to determine pleasing dimensional : oe 
relationships between width of a building and its Figure 4.7 

height, the size of the portico and even the position of the columns supporting the structure. 

The final result is a building that feels entirely in proportion. The neo-classical architecture movement 
reused these principles too. 
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After completing this section, Students will be able to: - 


¢ understand basic vector concept 
* know vector tracing 
¢ define flat character designing 


4.5 Vector Graphics 

The vector graphics are points, lines, curves and 
shapes that are based on mathematical formulas. 
When you scale a vector image file, it preserves 
resolution and there's no loss of quality, so it can 
be resized to whatever large or small you need it 
to be. It's an excellent tool for putting company 
logos on business cards, creating poster designs. 
Any art made with vector illustration software 
like Adobe Illustrator is considered vector art. 
For Example we may draw the domino logo in 
Illustrator as vector: 

No matter how much you zoom. it will not 
break pixels because it is a vector graphics. 


4.6 Vector Tracing 

Vector tracing is the process of convertion of 
rastor image to vector graphics. Before you can 
getstarted, you'll have to selec the image you 
want to convert. We’ll use the logo of Shell 
Petrol for an example. 


Do you know ? 


The first version of Illustrator which was conceived 
by Adobe co-founder John Warnock, appeared 
about 28 year ago, in late 1986. The first version 
available to the general public was released on 19th 
March 1987. 


Step 1. Open the Image and select it using the selection tool. as can be seen in figure 4.8. 


Figure 4.8 
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Step 2. After clicking, You’ll be asked to choose the tracing method, depending on the resolution of the 
image choose any method. 


[Default] 

High Fidelity Photo 

Low Fidelity Photo 

3 Colors 

6 Colors 
0g 

Shades of Gray 

Black and White Logo 

Sketched Art 

Sdinowettes 

Line Ast 


Figure 4.9 


Step 3. You can click on expand and edit the image. 


Convert Tracing objects to | 


Figure 4.10 
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Now let’s compare Normal Image vs Vector 


Before After 


4.7 Flat Character designing 


Step 1: Let’s make a cup from a 
rectangle. Create a 32W x 25H px green 
shape. Make its top corners slightly 
rounded, and then move to the bottom 
corners and set the Radius to 9 px. 
Create a light-green highlight on the 
left edge of the mug. 


Step 2: Let’s add a handle. Create a 12W x 15H px rectangle. 
Select its top and bottom left anchor points with the Direct 
Selection Tool (A) and make the corners 5 px rounded. 
Duplicate (Control-C > Control-F) the shape, hold Alt-Shift and 
make the copy smaller. Select both shapes and use the Minus 
Front function of the Pathfinder to cut the top shape out, making 
a hole in the center of the handle. 


Figure 4.12 


Step 3: Attach the handle to the mug 
and Send to Back (Shift-Control-[). 
Finish the mug by adding a small 
narrow rectangle to its bottom edge. 


Figure 4.13 
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After completing this section, Students will be able to: - 
¢ understand downloading assets from cc libraries 
¢ learn installation of assets from cc libraries 


4.8 Managing assets from cc libraries 
To download assets to a Creative Cloud Library in your desktop app, go to Window > Libraries or Window 
> CC Libraries to open the Libraries panel. As can be seen in figure below: 


New Window 


Arrange 
Workspace 
Browse Add-ons... 


Extensions 


Vv Application Frame 


¥ Control 
Tools 


Actions 

¥ Align 
Appearance 
Artboards 
Asset Export 
Attributes 
Brushes 
Color 
Color Guide 
Color Themes 
CSS Properties 
Document Info 
Flattener Preview 
Gradient 
Graphic Styles 
image Trace 
info 


Figure 4.14 


You can use the Libraries menu to create a new library and name it, or simply add assets to the default, My 
Library. 

Click plus (+) in the Libraries panel to add graphics, text styles, colors, and effects from your document. 
You can also add graphic assets such as shapes and photos by dragging them directly from your project into 
the Libraries panel. 

Asset thumbnails are organized by category, so they’re easy to locate. Double-click an asset’s title to 
rename it. 

Now that the asset is saved to a library, it’s easy to drag and drop it to other projects. 
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4.9 Add assets from Adobe Stock and mobile apps 


You can access Adobe Stock directly from 
Adobe desktop applications. 

In the Libraries panel, type a term in the 
search field and filter by asset type. When 
you find the right asset, drag it directly 
from the search results field to your 
document. This saves a copy of the 
watermarked asset to your current library. 
You can also download the watermarked 
version of the asset directly to your 
Libraries for use in any Adobe desktop 
application. 

If you don't find anything you like in the 
Libraries panel, click See More Results 
On The Web to browse the Adobe Stock 
website. Pick an asset and click Save Figure 4.15 

Preview to Computer. You can also click the pop-up menu to save the preview to one of your libraries. 


4.10 Reuse assets from CC Libraries 

To add a graphic asset to your project, drag it directly from the library onto your Illustrator artboard, 
Photoshop canvas, InDesign layout, Premiere Pro or Animate timeline, or web page layout in 
Dreamweaver or Muse. 

To apply layer styles, colors, and text styles, select an object in your project and click the thumbnail of the 
desired library asset. 


Figure 4.16 


Section-lV 


After completing this section, Students will be able to: - 
¢ understand complete typography techniques according to products and industry 
requirements 
¢ define major classifications of typefaces 
¢ understand clipping mask from type. 
¢ describe warping print type, type on a path, paragraph of type, type on a rectangle 
and vertical test. 
¢ enlist characteristics of the various families of typefaces 
¢ classify the anatomical aspects of type. 


4.11 Typography 

Typography is the art and technique of arranging Do you know ? 

type to make written language legible, readable Typography with moveable type was invented 
and appealing when displayed. The arrangement during the eleventh century song dynasty in China 
of type involves selecting typefaces, point sizes, | by Bi Xheng (990-1051). 

Line lengths, line-spacing, and letter-spacing, and 
adjusting the space between pairs of letters.Graphic designs are meaningless if they aren’t well-equipped 
with typography. The use of typography elements has an overwhelming presence, especially in text-based 
designs. For graphic designers, theuse of typefaces is crucial to create a message for viewers or the target 
audience of a brand. 


Type Faces 

There are five basic classifications of typefaces: serif, sans serif, script, monospaced, and display. As a 
general rule, serif and sans serif typefaces are used for either body copy or headlines (includingtitles, 
logos, etc.), while script and display typefaces are only used for headlines. Monospaced typefacesare 
generally used for displaying code, though they can also be used for body and headline copy,and were 
originally used on typewriters.Not all serif and sans serif type faces are equally suitable for both body and 
headline copy. Different typefaces are more legible than others at small sizes, while others are more 
suitable for larger type. (This kind of information can generally be found in the commercial descriptions 
of the various fonts.) 


4.12 Create a clipping mask 

Hold down Alt (Option in macOS), position the 
pointer over the line dividing two layers in the 
Layers panel (the pointer changes to two overlapping 
circles), and then click.In the Layers panel, select the 
top layer of a pair of layers you want to group, and 
choose Layer > Create Clipping Mask, With the help — ADOBE 
of following figures, you'll havea better 
understanding of clipping: 

Step 1: Take Two layers 


~~ 


Figure 4.17 
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Step 2: Place layer 2 on layer 1. 


Figure 4.18 


Step 3: Right Click on it and select clipping mask. 


Group 
Make Clipping Mask 


Trandorm 


Asrenge 
Select 


Figure 4.19 
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Step 4: Final Results can be seen in 4.20 


Figure 4.20 


If you want to remove clipping mask , simply right click and select “Release Compound path”. 


4.13 Text wraping 


Let's grab our Type Tool, left click anywhere on the artboard, and type some text. Let's type "'WARPED".And 
we can go to the Character panel at the top, and we can pick a font—let's go for Gotham Bold. Goto 
alignment options and select Align Center so that it's in the middle. Now let's create a couple ofcopies by 
holding Alt-Shift and dragging. So your screen should look like this: 


@ Mewemercc fhe Col Otect Tyee Senet Dect View Wetow Hew “~@¥ 438 


WARPED 


WARPED 
WARPED 


Figure 4.21 
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4.14 Create a Bulge Effect 

We'll select the first piece of text, and go to Object > Envelope Distort > Make with Warp. We've got the 
Preview option checked, and we can choose the Style as well. There are lots of presets to choose from, so 
let's go for Bulge, and see how that looks. 


Pe —“8¥ ARR 


Figure 4.22 


4.15 Type on a path 

1- Select the path type object. 

A bracket appears at the beginning of the type, at 

the end of the path, and at the midpoint between the 

start and end brackets. Dm, 

2- Position the pointer over the type’s center 

bracket until a small icon appears next to the aN 
pointer. 

3- Do one of the following: 

To move text along the path, drag the center 

bracket along the path. Hold down Ctrl (Windows) 

or Command (Mac OS) to prevent the type from Figure 4.23 
flipping to the other side of the path. 


4- To flip the direction of text along a path, drag the 
bracket across the path. Alternatively, choose Type 
> Type On A Path > Type On A Path Options, select a 
Flip, and click OK. 
m 


Figure 4.24 
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For example: following is an example of Type on path , text is typed on a polygon for a better idea. 


AAAAAAAAAAA 
AAAAAAAAAAAAA 
AAAAAAAAAAAAAAA 
AAAAAAAAAAAAAAAAA 
AAAAAAAAAAAAAAAAAAA 
AAAAAAAAAAAAAAAAAAAAA 
AAAAAAAAAAAAAAAAAAAAA 
AAAAAAAAAAAAAAAAAAA 
AAAAAAAAAAAAAAAAAA 
AAAAAAAAAAAAAAAA 
AAAAAAAAAAAAAA 
AAAAAAAAAAAA 


4.16 Characteristics of Type face Families 

Serifs 

These typefaces have small extensions, which embellish the basic structure of a typeface. Serif typefaces 
have existed since the beginning of type. They are visible in Old style and Humanist type serifs like 
Garamond. Baskerville, another serif typeface belongs to the transitional era. Bodoni and Rockwell are part 
of Modern and Slab serif(Egyptian) styled typefaces. 

Sans-serif 

Sans means without. These typefaces are devoid of those small extensions, hence without serif. Examples 
include Gill sans which has Humanist connotations, Helvetica with it’s transitional characteristics and so 
on. 

Script 

Letter forms developed in close relation to human handwriting are script typefaces. They are flexible in 
nature with varying stroke widths. Example : Bistro Script, Shelly, Minstral etc. 

Blackletter 

A bold script style of calligraphy used heavily during the renaissance. Example: Fraktur. 

Decorative 

Typefaces which do not fit in other categories are decorative in nature. Built for specific use cases which 
largely consist of headlines, posters etc. 
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After completing this section, Students will be able to: - 


¢ define stationary components 
¢ learn to design business card, brochure, letter head, and flyers etc. 


* export files in different formats 


4.17 Stationary Components 

Stationery is the name given to materials needed for written and print communications, especially in 
businesses, companies, and organizations. Office supplies such as letterheads, envelopes, pens and pencils, 
notepads, etc. 

Stationery design, then, refers to applying custom graphic art to these items as part of a branding strategy, 
to make them part of a brand’s image commonly including logo design, name, and slogan plus graphic 
elements to make them pop. 


4.18 Designing a Stationary component 
Business Card 


1. Create a new document 
Create a new document with the dimensions 2 inches by 3.5 inches, which is international standard size. 


Nene One arene 


Let's start something new 


Figure 4.25 


2. Design a logo or add a photo 

The front of your business card can feature a logo, photos or 
simply your name. You can create a logo in Adobe Illustrator and 
add it to the business card afterwards, or you can design the logo 
directly on your business card. 


Figure 4.26 
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3. Add important information 

To make a design for the back of your business card, create a new document with the same dimensions. 
Then, design the back to include important information like your name, phone number, email address, 
address or general location, and any relevant websites like your Adobe Portfolio and social media. 


4.19 Letter Head 
1. Choose a standard page size ee 
In the United States and Canada, standard letter ie 


size is 215.9 by 279.4mm, or 8.5 by 11 inches. 
Many other countries use a standard letter size 
called A4 (210 by 297mm, or 8.27 by 11.7 
inches). 

2. Try creative logo placements 

The typical letterhead has a logo in the upper left 
comer of the page. Your team may want to 
differentiate your design with an artistic layout 
that weaves in your logo and other design 
elements more creatively. 

3. Select colors and fonts carefully Figure 4.27 

Choose colors and fonts in harmony with your brand guidelines, so your letterhead matches your other 
marketing materials. Make it easy for your audience to read important information, like email addresses 
and phone numbers, by ensuring good color contrast and text spacing. 

4. Pick an appropriate paper stock 

Once it’s time to put your letterhead out into the world, think about what kind of information different 
paper qualities communicate. A thicker, high-quality paper adds weight to your message, literally and 
figuratively. 


4.20 Flyer 
1. Add a strong image 


First, you'll create a round frame, and then add your image 
inside the frame. 

Press and hold the Rectangle Frame tool in the Tools panel 
and select the Ellipse Frame tool. Press Shift and drag to 
create a perfect circle. 

With the round frame selected, choose File > Place and open 
any photo on your computer, or use our sample file. 

Now you can reposition your image inside the frame. Press 
the V key to switch to the Selection tool. When you hover Figure 4.28 

over the image, the Content Grabber appears (donut-shaped circle). Drag the Content Grabber to move the 
image inside the frame. To move the frame on the page, drag it by its edge or square bounding box. 

Try clicking one of the Fitting options in the Frame Fitting section of the Properties panel to fit the image 
to its frame in different ways. 
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2. Create an impactful headline 

Press the T key to select the Type tool and drag a large text frame 
for your headline. 

Type your headline text. Select your text with the Type tool and 
choose a font from the Character section of the Properties panel. 
You can choose a font that’s already installed on your computer or 
activate new fonts from Adobe Fonts available to Adobe Creative 
Cloud members. 

3. Add the remaining text and format it 

With the Type tool, drag to create another text box and type your text. Practice formatting the text as shown 
in the previous step. We set the body copy in Merel Light at 18 pt size and increased the tracking. 


vs 
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Figure 4.29 
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Figure 4.30 
4. Prepare your flyer for printing 
Your modern flyer design is ready. 
To save a PDF you can hand off for printing, choose File > Export. Select Adobe PDF (Print), and then 
click Save. In the Export Adobe PDF window that appears, select the High Quality Print preset at the top 
and click Export. 
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4.21 Exporting Files in Different Formats 


Step 1. To export a file to different formats, Click on Files then on Export and then on “Export as” 


Figure 4.32 


Step 2. Then Go to the directory you want to save the file and click on “save on type” and then select 
the format you want your file to be saved in. 


Figure 4.33 
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EXERCISE 
Select the most suitable option. 


1. Adobe Illustrator is an application program which helps to create. 


a) Logo b) Graphics c) Illustrations d) all of these 

2. The home screen on Illustrator is something you will see after opening the program. 
a) seldom b) instantly c) quickly d) rarely 

3. Workspace is the main screen of Illustrator. 

a) work b) home C) office d) exit 

4. Menu bar is always on the of the windows. 

a) bottom b) top c) left d) right 

5. The tool panel is on the of the illustrator by default. 

a) top b) bottom c) right d) left6 


6. Selection tool is found in 
a) Menu bar b) Property bar c) Tool bar d) none of these 


7. The white color pad on the workspace is : 
a) Page b) Paper c) Art board d) both a and c 


8. The area outside the artboard is called : 
a) Grey zone b) Practice zone c) paste board d) both b and c 


9. Shortcut key for selection tool is 


a) S b) S+T c)V d)M 

10. Shortcut key for Type tool is , 

a) N b) T c)O d) A 

11- is used to select part of the object. 

a) full b) half Cc) particular d) both a and c 
12- Eyedropper tool any color from the images or objects that are already present or created within 
the 

a) Waters b) Picks c) Erase d) Undol 

13- The Most powerful drawing tool in illustrator is 

a) Selection tool b) Pen tool c) Magic wand tool d) Marquee tool 
14- There are different types of shapes available in illustrator by default 

a) two b) three c) three d) four 
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15- If you press the while drawing key and the shape will be drawn equally resized 
a) Ctrl b) Alt c) Shift d) Esc 


Answer the following questions briefly. 

. What is Golden Ratio and how to use it? 

. Describe monogram logos. 

. What is Typography and Type Faces? 

. Define the emblem types of logo 

. Describe text wraping. 

. Describe Sans Sarif font. 

. Describe Sarif fonts. 

9. Describe pictorial mark logo. 

10. Differentiate between wordmark and letter mark logo. 
4. What are the characteristics of Typeface Families? 


ONDNWN 


Write answers of the following questions in detail. 

1. What are Vector Graphics ? Also write the procedure to trace vector? 
2. What is a Stationary Component and how to design it? 

3. Explain different types of logos. 


ACTIVITIES 


. Design a logo by using golden ratio 

. Design a Monogram for your school 

. Download and install brushes and font libraries. 

. Design Stationary for school. 

. Design a simple Flat Character. 

. Create Clipping Mask Between Two Text Layers. 
. Create a Bulge Effect and text on a path. 

. Create a letter head on a Legal Size page. 

. Create a Simple Flyer. 
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Adobe XD-II 


After completing this section, Students will be able to: - 


¢ understand XD Interface 
¢ define artboard and grid usage 
¢ understand import and export content 


5.1 Adobe XD 

Adobe XD is a vector-based UI and UX design tool and it can be used to design anything from smartwatch 
apps to fully fledged websites. Let’s take a look at what it offers to designer and why it has become such a 
powerful tool in the web design industry. 


5.2 Purpose 

The main purpose of Adobe XD is to addresses the two main problems that Photoshop and other graphics 
applications couldn’t: 

1- Interaction design isn’t static. A designer cannot communicate a fluid and dynamic design using pixels 
alone. 

2- A modern design process involves more than a polished finished article. Wire-framing, iteration, and 
behavior are all part of the collaborative decision making with UI and UX design. 

Adobe XD is ideal for vector-based UI design, wireframing, interactive design, prototyping, and hifidelity 
web/app design, for solo designers or whole teams. 


5.3 Interface 
The Interface of Adobe XD can be seen in figure below 
AB Cc o —E F G 


a ee ee ee . a x 


mM 
L . 7 
K = 


Figure 5.1 
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Referr to FIgure4.1 for following labels: 

A. Main menu B. Design mode —_C. Prototype mode D. Share mode 

E. Preview on device F, Preview G. Zoom percentage H. Property Inspector 

I. Pasteboard J. Artboards K. Plugins L. Layers M. Libraries N. Toolbar 


5.4 Art Board 

Artboards represent the screens in your application or pages in your website. It streamlines the design 
processes and creates interactive designs for multiple screen sizes in a single document. Use artboards to 
create your XD project. 

Create a new artboard 

Adobe XD provides you with artboards for popular screen sizes such as those for different versions of 


iPhones, iPads, and Web. You can create a custom artboard if the choices do not meet your requirements, 
as can be seen in figure 4.2. 


Home Design. Prototype. Share. 
iPhone 12 Pro Max v Web 1920 v Instagram Story v Custom Size 
428 x 926 px 1920 x 1080 px 1080 x 1920 px Ww H 


ey 


Figure 5.2 


5.5 Arrange artboards 
You can marquee select (drag select) or hold down Shift and select to pick up multiple artboards and move 


them. You can also use the Arrange buttons or the Arrange option in the menu to arrange the selected 
artboards. Refer to the figure 5.3. 
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5.6 Design in grids 


Grids let you align objects and text with guides. When you draw, objects snap to the grid automatically 
when the object’s edges are within the grid’s snap-to zone. Grids also help you get a quick idea of 
measurement while laying out objects or text on your artboards as can be seen in figure 4.4. 
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Figure 5.4 
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5.7 Exporting and Importing Files 

Exporting Assets 

Open your Adobe XD file and select the asset or the artboard you want to export. To select an artboard click 
the artboard title. 

You can also mark assets or artboards for export and then export them all in bulk. To mark assetsfor export, 
open the Layers panel and click the Mark for Batch Export icon. 

To export a JPEG on macOS, select File > Export. On Windows, click the Hamburger menu, and click 
Export. There are 3 options to export: 

Batch: Export assets that are marked using the Mark for Export option. 

Selected: Export selected assets. 


All Artboards: To export all the artboards in your design. 
When you export assets (such as photos) as JPEG, you can set the quality level of the exported JPEG 
according to your needs. Choose any of the percentage options in the Quality drop-down list,navigate to the 
destination folder, and click Export. 
Importing Assets 
To import an image from your computer filesystem (Finder or Windows Explorer) 
° Drag and drop the file into XD 
° Or copy the file and paste it into XD 
° To import an image from your browser: 
° Drag and drop the image into XD 
° Or right click on the image, select “Copy image” and then paste it into XD 
° To import an image from Photoshop: 
With the marquee tool, select the image you want to import, Copy it or “Copymerged” it (Edit > Copy 
merged) and then paste it back into XD 
To import a vector from Photoshop: 
° Right-click on a shape/vector layer, click on “Copy SVG” and then copy it back into XD. 
° To import a vector from Illustrator: 
Select the vector shape in Illustrator, copy it and paste it back into XD. 


Section-I | Adobe XD Overview Page 71 


Section-II 


After completing this section, Students will be able to: - 
¢ understand layouts, Designs, creation, and preview Using UI kits 


¢ define add and edit artboard 
¢ understand Grids to set columns and margins. 
¢ understand designing landing pages with XD and PS. 


5.8 Layouts ; ns 
The layout option enables a series of 
columns and gutters across the 
artboard, allowing content to be 
aligned to a number of columns for 
defining width and spacing. The 2 lyon 

Layout Grid option is an excellent _ ‘ 
choice when working with responsive 

web layouts. Spacing, color, and the es 
width of a layout grid can be easily 
adjusted in the property inspector. As 
can be seen in figure. 

Square 

The square grid provides a grid 
overlay to your artboards, creating Figure 5.5 

what looks like graph paper so Vercel : 
elements can be aligned to the grid B12 

both horizontally and vertically. If ste 
your layouts work on defined grid 
sizes (e.g. 8px, 16px, etc.), you can 
set this manually in the property 
inspector to ensure your elements can square 

align to the proper grid, refer to ee > 
figure. 


5.9 Content-Aware Layout Monday 

As your design evolves changes will & 

be made — everything from buttons, 

labels to full page layouts. In the past, 

iterating through a design, especially 

at higher fidelity stages, could be a Figure 5.6 

chore, but it doesn’t have to be. With Content-Aware Layout features in Adobe XD layouts adapt 
accordingly whenever content changes or elements are adjusted. 

Padding 

With padding enabled, modifying text on a button is as easy as changing the text. As the text string gets 
longer or shorter, the button will adapt and resize based on the padding defined in the Property Inspector. 
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Stacks 

Working alongside padding, a Stack makes rearranging elements in your design as simple as clicking and 
dragging. Using stacks with a list of elements, a horizontal gallery, or full content sections allows a page 
to be rearranged in a matter of seconds, all while maintaining proper spacing and alignment. 

UI Kits 

UI kits in Adobe XD are a great way to jumpstart a new design project. With these kits, you get access to 
some handy resources that you can modify and use for your website or app design. 

let’s take a look at how you can download UI kits in Adobe XD, right from within the software. Just follow 
these steps to get started: 

Step 1: Click on the hamburger menu button in the top left corner of the software. 

(Refer to the figure below) 


<= 


Figure 5.7 


Step 2: In the menu, scroll down to the Get UI Kits option and then click on either three of the available 
options. (Refer to the figure below) 

Let’s choose the Google Material UI kit. However, depending on your project you can select either the 
Apple iOS or the Microsoft Windows kits. That will open up an official web page from which you can 
download the UI kits for free. 

Step 3: Locate the Adobe XD UI kit in the following web page, and download it on your system. (Refer to 
the figure below) 


Figure 5.8 Figure 5.9 
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Step 4: Now open up the downloaded file in Adobe XD and you'll be greeted with a bunch of artboards 
containing UI resources for the respective platform. (Refer to the figure below) 


3 
z 
se 
. & 
s 
. sp =o = 
i eel - —— 
mt i —_ — 
a =) e — 
a 
— —_ 
a 
; fg — 
= . 
i i Ba 
a . 
e aunt — 
s 
5 b= — 
: is 
. = 
—_— 
. 


Figure 5.10 


You can hold the Ctrl button and move the scroll wheel to zoom in/out to see all the individual artboards. 
(Refer to the figure below) 


Figure 5.11 
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The website has some great options to choose from, including this really cool Movie Magic UI kit that looks 
like a heads-up display. (Refer to the figure below) 
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Figure 5.12 


5.10 How to use kits in Adobe XD 


To use UI kits in your project, just follow these simple steps: 


Step 1: Zoom in on the UI element you want to use in your project and click on its title to select it. (Refer 


to the figure below) 
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Figure 5.13 
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Step 2: Now copy the element using the Ctrl+C shortcut. (Refer to the figure below) 
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Figure 5.14 
Step 3: Then open up a new Adobe XD project from the menu. (Refer to the figure below) 
a a <> 


Figure 5.15 


Step 4: Here, paste the UI element using the Ctrl+V shortcut. (Refer to the figure below) 
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Figure 5.16 


Step 5: To remove guides, click on the lock icon in the top left corner and then hit delete. You can skip 
this step if you wish to use the guides to place more objects into the element accurately. (Refer to the 
figure below) 


Figure 5.17 


Step 6: Now head back to the UI kit to select another element to add to this page. Once again, click on 
the title of the element and copy it using the Ctrl+C shortcut. (Refer to the figure below) 
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Figure 5.18 
Step 7: Paste the new element on the previous element and then align it as per the guides. (Refer to 
the figure below) 


Figure 5.19 


Step 8: Now to edit each element in the toast, double click on the text box and then enter the text you 
want to use. First, let’s change the title of the toast. (Refer to the figure below) 
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Figure 5.20 


Once you're satisfied with the outcome, just go ahead and save your file by clicking on the Save As option 
in the menu or by using the Shift+Ctrl+S shortcut. 


Figure 5.21 
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5.11 Managing Artboards 


Create a new artboard 


Adobe XD provides you with artboards for popular screen sizes such as those for different versions of 
iPhones, iPads, and Web. You can create a custom artboard if the choices do not meet your requirements. 


Use the preset artboard sizes or create your custom artboard. 


fiers Design. Prototype. Share. 
iPhone 12 Pro Max v Web 1920 v Instagram Story v Custom Size 
428 x 926 px 1920 x 1080 px 1080 x 1920 px WwW H 
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Figure 5.22 


Changed your mind about the artboard size? Resize them. You can also rename them based on your design 
needs. Want to create more artboards and manage their placement? Duplicate and rearrange them. 


Rename 
Double-click the artboard title. 


h 


Figure 5.23 
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Resize 


Drag the circular handle that appears on the edges of an artboard. 
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Figure 5.24 


Duplicate 


Select the artboard and press Ctrl /Cmd + D. 


Artboard -1 Artboard -2 


Ctrl / Cmd 
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Figure 5.25 
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Align and Distribute 


Select multiple artboards and click Align and Distribute in the Property Inspector. Drag the artboard around 
to rearrange them. 
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Figure 5.26 


5.12 Columns and Margin with Grid 


With a layout grid applied to an artboard, you can set the number of columns, column width, gutter properties, 
and margin sizes from the Grid section of the Property Inspector. 


Change number of columns 
Enter the value in the Columns field. For web designs, 12 or 16-column grids are commonly used. 
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Figure 5.27 
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Change column width and gutter properties 


To change the width of the columns, enter the value in the Column Width field. To define your own gutter 
width, edit the default Gutter Width field. 
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Figure 5.28 


5.13 Landing Page 


To achieve an effective design, it is important to know what the goal of the design should be. In this case, 
the goal will be to direct visitors to browse available properties through the fictional online realty service, 
homey. 


Depending on the product or service, a website may have several different landing pages to capture audiences 
from various email, or search campaigns. Most frequently, the homepage of the website is the main landing 
page, though there can be many more. 


Figure 5.29 
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5.14 Navigation links 

The navigation links will be set up on the right side of the navigation bar to create balance with the page, 
and follow standard conventions. Using the text tool, click to add the first navigation item labelled Browse 
Inventory. Set the text alignment to be right aligned. 
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Figure 5.30 


Next, make a group out of the text box. Making this a group will allow a Stack to be enabled enabling easier 
duplication and rearrangement of menu items. Once the stack is enabled, double click into the group and 
select the text box. Copy and paste the first text box until there are three text boxes stacked horizontally. 


Figure 5.31 
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5.15 Login button 


Finally, create the login button by drawing out a rectangle about 46px in height and adding the text Login 
on top. Using the alignment tools, center the text vertically and horizontally in the button. Group the two 
elements together, and enable Padding to ensure that the button spacing is maintained as the text changes. 


Browse Inventory Sell YourHome Contact an Agent = 


Figure 5.32 


Since this button will be used elsewhere in the design, convert it to a component for easy reuse by using 
the right click menu and selecting Make Component. 
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Figure 5.33 
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5.16 Title and call to action 


To start, the title section will be defined. To keep it simple, this hero layout uses an approximate 50% split 
between the illustration and the copy. 


Using the text tool, add a text box with the title Search thousands of homes handpicked for you. This will 
be the main title, so set the text box style to auto-height to allow the text box to resize vertically. Set the 
font size to 34px and make the type bold so that it really stands out and carries weight. 


& Designing 2 Landing Page in Adobe XD * ~ 
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Figure 5.34 


Finally, the call to action will be added under the heading, prompting visitors to take the next step in their 
journey. In many cases this is a primary button with a descriptive, actionable label. Since a button component 
was already created, it can be dragged out of the components window and placed on our hero design. 
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After completing this section, Students will be able to: - 


¢ understand importing graphics, text and facts, multiple screen layouts for games, mobile 
and web Using grids repeating elements 

* explain single interaction, content scrolling and record an interactive prototype. 

¢ describe export artboard and assets 


5.17 Importing assets via drag and drop 

Another method for bringing assets into Adobe XD is to drag and drop from the Finder (macOS) or 
Windows File Explorer (Windows). This is a great way to insert images into existing frames, as you’ ll see 
in a later section “Masking with an image fill,” or as a more precise placement option. 

Note: Below mentioned folders and files are assumed. You can reffer to your folder and files 

1-Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the artboards. 

2- With the Select tool (example.jpg) selected, click in a blank area away from artboards to deselect all. 
3- Go to the Finder (macOS) or Windows Explorer (Windows), open the Lessons > Lesson04 > images 
folder, and leave the folder open. Go back to XD. With XD and the folder showing, click the image named 
“image.jpg.” 

The image.jpg image has a dimension 
of 1300 pixels x 1135 pixels. As I 
mentioned, JPEGs you import are 
placed at half their original size. 

4- Command-click (macOS) © or 
Ctrl-click (Windows) the image named 
“dann.png” to select both images. 
Release the key and drag either image 
into XD, just to the right of the artboard 
named “Instructor detail — Dann,” 
above the watch artboards. Figure 4.55 

Single Interaction 

The interactions module and related APIs provide read only information about the document's interactive 
prototype mode, including: 

The blue "wires" seen in XD's prototyping UI, known as "interactions," which specify gestures/events 
which trigger actions to occur in the prototype. Accessible as a single consolidated global listing via this 
module's all interactions API, or you can access information from specific nodes in the scenegraph via 
Scene node triggered Interactions and Artboard.incoming Interactions. 

Designers can author multiple prototype or interaction flows in a single document and publish 
uniqueshareable links for each flow. Developers can access all document flows using the flows API. With 
multipleflow support the home Artboard API is being deprecated as XD no longer has a single home 
artboard restriction Properties that affect Artboard scrolling behavior: Artboard. 


5.18 Recording interactions of prototype 

1- In the Design or Prototype mode, click the Desktop Preview icon. 

The Preview window appears. The Preview window displays the artboard that contains the currently 
selected objects. If no object is selected, the Preview window opens with the Home artboard first. 
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2- (Optional) Click an asset or prototype interaction in XD and make changes if necessary. Notice that the 
changes are instantly updated in the Preview window. 

3- To close the Preview window, click the close button of the window. 

(Recording prototypes is not supported in Adobe XD on Windows. However, there's a workaround. Press 
the Windows + G keys and use the native recorder to record the Preview window.) 

To preview your design or prototype, click the Preview icon. In the Preview window, click Record. If 
there's an interactive prototype, all interactions in the Preview window, are recorded as a .mp4 file. 

To stop recording, click Record again or press Esc. Specify a location to save the .mp4 file. 

The recording also stops if: 

1-You switch away from the application 

2-The preview window does not have focus anymore. 


5.19 Grid Layout 

Grid Layout contains features targeted at web application authors. The Grid can be used to achieve many 
different layouts. It excels at dividing up space for major regions of an application, or defining the 
relationship in terms of size, position, and layer between parts of a control built from HTML primitives. 
Like tables, the Grid enables an author to align elements into columns and rows, but unlike tables, the 
Griddoesn't have content structure, and thus enables a wide variety of layouts not possible with tables. 
For example, the children of the Grid can position themselves with Grid Lines such that they overlap and 
similar to positioned elements. 

In addition, the absence of content structure in the Grid helps to manage changes to layout by using fluid 
and source order independent lay out techniques. By combining media queries with the CSS properties that 
control layout of the Grid and its children, authors can adapt their layout to changes in device form factors 
orientation, and available space, without needing to alter the semantic nature of their content. 
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EXERCISE 


Select the most suitable option. 


1-Adobe XD is a vector-based and UX design tool. 

a) UI b) User Experience c) Dev d) both a and b 
2-UX stands for 

a) Unique Xavier b)User Experience c) Ultimate Xamp d) User Xample 
3-Interaction design is in Adobe XD. 

a) Static b)Flow c) Motion d) Good 


4-Adobe XD is ideal for UI design. 
a) Genuine b) Real c) vector d) Logo 


5-Cloud Document can be accessed from 


a) Settings b) Home c) Menu d) Help 

6-Main Menu and Design mode is a part of 

a) Home screen b) Intro c) Files d) Workspace 
7-Artboard represents the in your application. 

a) screen b) paste board c) workspace d) none of these 


8- Adobe XD provides different versions of screen e.g 


a) Iphone b) Ipad c) Web d) all of these 
9- Design view means organise information. 
a) File b) Folder c) Design d) Source 


10-Prototype view can be accessed from : 
a) Prototype tool b) Share mode c) Chrome cast d) Screen Mirror 


11-Repeat grid is a grid of repeating items such as : 
a) photo b) text c) vector d) all of these 


12-XD can open files from 


a) Inpage b) Corel Draw c) Illustrator d) both b and c 
13- command can be used to design apps. 
a) text b) voice c) visual d) both a and b 


14-Any website or app starts with 
a) intro b) outro c) program d) wireframe 
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15- let you align objects and text with guides. 
a) Rule b) Guide c) Grid d) Mesh 


Answer the following questions briefly. 

1. Define Adobe XD and its Purpose? 

2. What are different parts of Adobe XD Interface Design? 

3. What are artboards and Grids in Adobe XD? 

4. What are Layouts in Adobe XD and Square? 

5. Shortly Describe Content-Aware Layout, Padding and Stacks. 
6. What is Grid Layout? 


Write answers of the following questions in detail. 

1. How do you Export and Import Files in Adobe XD? 

2. What are single Interactions and how do you record Interactions? 
3. Define user interface (UI) kits, how you can use them in XD ? 


ACTIVITIES 


1. Create multiple art boards to design UI kits. 

2. Design a Website UI with XD. 

3. Design a responsive single layout using grid. 

4. Create a new Artboard using UI Kits and modify it uniquely. 
5. Import Assets into Adobe XD. 
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After completing this section, Students will be able to: - 
° define InDesign 

¢ understand InDesign workspace 

* understand pages panel 

¢ describe paragraph styles, character styles and object styles 


6.1 InDesign 

InDesign is a sophisticated page-layout program. You can use it to createprofessional-looking documents, 
including newsletters, books and magazines. You can also use it to create documents for distribution on a 
tablet such as an ipad and even documents that includes interactivity or videos. It has evolvedinto a tool that 
lets you publish content to just about any device or in print.For example, using InDesign you can create a 
document and distribute content in print and then add hyperlinks, videos, and export it to PDF or EPUB. 


6.2 Workspace 

The Workspace refers to how the entire InDesign window is re 
configured—the panels on the Panel Dock, the tools that are displayed on Bock 

the top level of the Toolbar, etc. There are several preset workspaces built Digital Publishing 
into InDesign that are geared for different kinds of projects, such as Digital v Essentials 
Publishing. Customized workspaces can also be created by users. Interactive for PDF 
1- To select a preset workspace, click the Workspace menu at the upper Printing and Proofing 


right of the InDesign window. a | 
2- Choose Typography as can be seen in figure 6.0 to use as the base for the “EES 


custom workspace. Now bring out some additional panels by going to the 
Window menu and, in this case, scrolling to Object & Layout and Recent Files 
choosing Align. Start 


Reset Essentials 


New Workspace... 
Do vee know ? Delete Workspace.. 
Adobe launched InDesign in United Kingdom 
through a series of promotinal presentations in 
hotels. The marketing concentrated on new Figure 6.0 
software architecture-a small central software 
kernel (about 2Mb) to which add-ons would be 
bolted as the program’s functionality expanded in 
later versions. 


Show Full Menus 
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Arrange > 
Workspace > 
Browse Add-ons 


Articles 
CC Libraries 
Color > 
Y Contr! Ctrle Alt+6 
Editorial > 
Effects Ctri+Shift+F10 
Info Fg 
Interactive > 
Layers F7 
Links Ctrl+Shift+D 
ae eae 
Output > Pathfinder 
Overlays Transform 
Pages Fi2 
Stroke F10 
Styles > 
Text Wrap Ctrl+Alt+W 
v Tools 
Type & Tables > 
Utilities > 
Figure 6.1 


illli Pages 3- The panel opens in the middle 
of the InDesign window. To 
tches anchor it to the Panel Dock at the 
right, click and hold on the bar at 
the top of the Align Panel 
groupand drag it underneath the 
other panels on the dock so that a 
Stroke blue highlight appears. This 
indicates the panel will be 
anchored to the dock. 

4- This new configuration can 
be saved by going back to the 
Workspace menuand choosing 
new Workspace. 


C Libraries 


Glyphs 


=@: Text Wrap 


Gradient 


3 Story 
Hyperlinks 


Effects 


Paragraph 


oy!! Paragraph Styles 
Character 


Character Styles 
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Figure 6.2 
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Figure 6.3 
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5- Name the workspace in the next dialog box and click OK. 


New Workspace 


- Advanced 
kate's space 
Book 
Digital Publishing 
Essentials 
Interactive for PDF 
Printing and Proofing 
Typography 
: Touch 
Figure 6.4 
Recent Files 
6- The custom workspace now appears in the Workspace menu. Start 
Reset kate’ 
6.3 Pages Panel ay 
ew vv¥o ace... 
Step 1: Locate/Open the Pages panel : 
When you click the OK button in the New Document window, InDesign Sao eee 
creates a blank document set up to your specifications. If you’re used to Show Full Menus 
working in a single-page programme like Illustrator or Photoshop, or 
even a word-processing programme, like Microsoft Word orPages, the Figure 6.5 


way that documents are laid out and navigated through in InDesign can 

seem quite different and may not be immediately intuitive. 

Unless you have set your Preferences to open a pre-defined Workspace, InDesign will open the workspace 
(the collection and arrangement of panels) in Essentials mode. You can view this, or alter the workspace to 
suit your specific purposes, from the top right of the control panel running along the top of your screen as can 
be seen in figure 6.6. 

One of the most important, and useful, panels in InDesign is the Pages panel. This will open by default, or you 
can find it in the Window menu (Window > Pages). You will seethat the panel is actually a group of three 
panels: Pages, Layers and Links. 


Essentials ~ | |O 
~ Advanced s! 
Book 4 \+= 
— Digital Publishing _———— 
v Essentials 
Interactive for PDF 
New in CS6 
Printing and Proofing 
Typography 


Reset Essentials 
New Workspace... 


Delete Workspace... 


Figure 6.7 
Figure 6.6 
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The Layers panel allows you to manage layers in your document, 
just as you would in Photoshop or Illustrator. You can choose to 
View or Hide layers, and Lock or Unlock them, by clicking in the |®!_ — 
two square spaces to the left of the layer’s name in the panel. © @ |j>Laver2 


> Layers 


6.4 Paragraph Styles 
Paragraph styles allow you to save and re-use specific text 
formatting (e.g. font or size) and paragraph formatting (e.g. tabs, 
indents or paragraph spacing) reference in figure. 


Page: 11, 2 Layers 


* Font family 
¢ Font style 
e Font size 


e Leading 

e Spacing 

* Horizontal/vertical scale 
¢ Alignment 

e Indents 

e Space before/after 

e Tabs 

e Paragraph Colour 


6.5 Character styles 

Character styles allow you to save and re-use 
specific text formatting (e.g. font face or fon Figure 6.9 
colour). Using a character style allows you to Of IS 

customise specific text within a paragraph. 
Reference in figure. 


e Font family 

e Font style 

e Font size 

e Leading 

e Spacing 

e Horizontal/vertical scale 

e =Character Colour 

As a general rule, you should have a lot more 
paragraph styles defined than character styles. 


Character styles are for the exceptions, 
paragraph styles are for everything else. 


Figure 6.10 
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Use the Object Styles panel to create, edit, and apply object styles. For each new document, the panel 
initially lists a default set of object styles. Object styles are saved with a document and display in the panel 
each time you open that document. The Text Frame icon marks the default style for text frames; the 
Graphics Frame icon marks the default style for graphics frames and drawn shapes. 

Use the Object Styles panel to create, name, and apply object styles. For each new document, the panel 
initially lists a default set of object styles. Object styles are saved with a document and display in the panel 
each time you open that document. The Text Frame icon marks the default style for text frames; the 
Graphics Frame icon marks the default style for graphic frames; the Grid icon marks the default style for 
frame grids. 


Object Style Options 


Style Name: [Basic Gr ] 
Location: 


Basic Attributes EPUB and HTML 


General 
Fill 
Stroke JPEG 


Stroke & Corner Options Adaptive (no dither) 


Preserve Appearance From Layout: Default 


Size and Position Options 300 
© Paragraph Styles 
© Text Frame General Options 


High 


© Text Frame Baseline Options 
© Text Frame Auto Size Options 
© Text Frame Footnote Options (| Custom Layout: Alignment And Spacing 


| = | Story Options 
Effects for: Object 


Transparency 
(| Drop Shadow 


[| Inner Shadow Before Image 


|_} Outer Glow Size: Default 


(_] Inner Glow 


[_] Bevel and Emboss 
Export Options 
© ak Tec 


© Tagged PDF 
EPUB and HTML 


(-] Preview 
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After completing this section, Students will be able to: - 


¢ define InDesign graphics, how to handle InDesign graphics 

¢ define working and customizing the link panels, locate missing images, and adding 
graphic layout. 

¢ define auto fitting, using adobe bridge to import graphics, multiple graphics using mini 
bridge, object style, wrapping text, clipping path and alpha channels 

¢ understand to import PS file 


6.6 Graphics in Adobe InDesign 
In InDesign, you can bring raster images, like an image you take with your phone, or vector graphics, like 
a logo, into your documents: 

1-Choose File > Place to place a graphic (or multiple graphics) in your document. 

2-Click Open. If a frame was selected before placing, the graphic is placed within the frame. You can also 
click to place a graphic into an existing empty frame or create a frame as you place a graphic. 

3-With the Selection tool in the toolbox, drag a corner point of a graphic frame to resize the frame and 
toreveal or hide parts of the image. 

4-Drag within the graphic area (not the center) to reposition the graphic and the frame. 

Graphics placed in InDesign are linked by default to the original file outside InDesign. If a placed graphic 
is updated outside InDesign in Adobe Photoshop for instance the graphic is automatically updated in 
InDesign. 

Choose Window > Links to see a list of all the graphic files placed in a document in the Links panel. Each 
linked graphic is listed in the Links panel along with the number of the page it’s on.Select an image in the 
Links panel and click the Go To Link button to select the image.Click the Relink button with a graphic 
selected in the list and navigate to a replacement image. Any 
transformations performed in InDesign are preserved. 

When you open a document with missing or modified graphics, a 


dialog box appears. 

1-In the Links panel, a graphic with a stop sign means it’s missing. 
To fix this issue, select the graphic in the Links panel, and click the 
Relink button at the bottom of the panel or click the Relink File 
button in the Properties panel. 

2-A graphic with a yellow yield sign icon indicates it has been 
modified. To fix this issue, select the graphic in the Links panel, 
and click the Update Link button at the bottom of the Links panel 
or click the Update File button towards the bottom of the Propertie§ 
panel. 


6.7 Links panel overview 

All files placed in a document are listed in the Links panel. These 
include both local (on disk) files and assets that are managed on a 
server. However, files that are pasted from a website in Internet 
Explorer do not displayin this panel. 


> | Minette fox jpg (2) de 
> ka Minette_S...y.jpg (2) 
de Minette S... Treejpg iy 
rs Minette37.jog 
EF Minette _iR.jpg e 
ft Minette_...umps.jpg [#4] 


BBB ber: Buckie jog 2 
1 Selected SS Ag SS J 
Link Info a 
+ Name: Belt Buckle jpa = 0 

Format: JPEG 
Page: 2 
Color Space: RGB 
Status: OK a 
Size: 62.1 KB (63585 bytes) v 


ICC Profile: Document RGB 
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In InCopy, the Links panel also displays linked stories. When you select a linked story in the Links panel, 
theLink Info section displays information such as the number of notes, the managed status, and the status 
of tracked changes. 

A. Category columns B. Show/Hide Link Information C. One or more instances modified icon D. Modified 
icon E. Missing-link icon F. Embedded-link icon. 

Modified 

This icon means that the version of the file on disk is more recent than the version in your document. For 
example, this icon appears if you import a Photoshop graphic into InDesign, and then you or someone else 
edits and saves the original graphic in Photoshop. 

A slightly different version of the Modified icon appears when a graphic is modified and one or more 
instances are updated while others are not. 

Missing 

The graphic is no longer in the location from which it was imported, although it may still exist somewhere. 
Missing links can happen if someone deletes the original file or moves it to a different folder or server after 
it’s been imported. You can’t know whether a missing file is up to date until its original is located. If you 
print or export a document when this icon is displayed, the file may not print or export at full resolution. 


6.8 Work with Links panel columns 

You can display additional categories, such as Creation Date and Layer, in the Links panel to display more 
information about the graphics. For each category, you can determine whether the information appears as a 
column in the Links panel and in the Link Info section at the bottom of the Links panel. 

Choose Panel Options from the Links panel menu. 

Select the check boxes under Show Column to add columns in the Links panel. 

Select the check boxes under Show In Link Info to display the information in the Link Info section at the 
bottom of the Links panel. 

Click OK. 

You can change the order of columns by selecting a column and dragging it to a different location. Drag the 
column boundaries to change the column width. Click a category title to sort the links by that category in 
ascending order. Click again to sort in descending order. 


Auto Fitting Seen teers Be 

The introduction of the Auto-Fit feature to © «: aT me > ao 2-8) a6 Me ec 
er HS 4} Select > aw >)| (mmm 5) | Gy vom |e!) a & 

CSS should not be over looked. By the end j . BiAto-fninad ot 


of this Quick tip youthe designer will be 
able to save some valuable time when 


importing images and graphics. Follow the Tex Fame Options. x8 

steps mentioned: - 

Setp 1: To open the Auto-Fit feature go to “ay 

Object > Fitting > Frame Fitting Options. pease 

Setp 2: You will be presented with a Cling Path > 
floating panel. The top section of the panel Interactive > 

controls how the images fit within the Soon ; 

frame. First tick the Auto-Fit box and then Convert Point > 

select the fitting option you require from the sont tina 


drop down menu and fill Frame 
Proportionally and align to the centre of the 
frame. 
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Setp 3: Ok, let's begin by importing a number of images to work with. 
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Once the Auto-Fit feature is active, InDesign indicates this by a ticking a box in the control panel. You can 
quickly turn Auto-Fit off by unticking the option box too. (Note: The Auto-Fit tick box will be only visible 


when a frame is selected). 


6.9 Importing graphics from Adobe Bridge 

Select a graphic from Adobe Bridge, Explorer (Windows), the Finder (Mac OS), or your desktop, and drag 
it into InDesign. The image must be in a format that InDesign can import. 

After dragging a file from any location other than Illustrator, it appears in the Links panel in InDesign. 
Using the Links panel, you can control versions and update as necessary. 

Select the original graphic and Drag the graphic into an open InDesign document window. 
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Once the Auto-Fit feature is active, InDesign indicates this by a ticking a box in the control panel. You can 
quickly turn Auto-Fit off by unticking the option box too. (Note: The Auto-Fit tick box will be only visible 
when a frame is selected). 


6.9 Importing graphics from Adobe Bridge 

Select a graphic from Adobe Bridge, Explorer (Windows), the Finder (Mac OS), or your desktop, and drag 
it into InDesign. The image must be in a format that InDesign can import. 

After dragging a file from any location other than Illustrator, it appears in the Links panel in InDesign. 
Using the Links panel, you can control versions and update as necessary. 

Select the original graphic and Drag the graphic into an open InDesign document window. 


6.10 Multiple graphics using Mini Bridge 

Adobe Bridge is a really useful tool for ‘bridging’ the content of your computer’s folders between your 
Adobe design applications. You can use the programme to organize files, and create sophisticated libraries 
of image sand text documents ready to use in your layout designs. Mini Bridge creates a miniature version 
of Bridge within your Adobe application, allowing you to drop content into your InDesign layouts quickly 
and easily. 

Object Style 

Object Styles is used to create, edit, and apply object styles. For each new document, the panel initially 
lists a default set of object styles. Object styles are saved with a document and display in the panel 
eachtime you open that document. The Text Frame icon marks the default style for text frames; the 
Graphics Frame icon marks the default style for graphics frames and drawn shapes. 

Object Styles panel is also used to create, name, and apply object styles. For each new document, the panel 
initially lists a default set of object styles. Object styles are saved with a document and display in the panel 
each time you open that document. The Text Frame icon marks the default style for text frames; the 
Graphics Frame icon marks the default style for graphic frames; the Grid icon marks the default style for 
frame grid 


6.11 Wrap text around objects 

1- To display the Text Wrap panel, choose Window > Text Wrap. 

2- Using the Selection tool or Direct Selection tool , select the object you want to wrap text around. 
3- In the Text Wrap panel, click the desired wrap shape. 


6.12 Clipping Path 

Clipping paths are silhouettes around portions of images. They can be used to mask out opaque white 
backgrounds, as well as create contours around portions of an image for text wraps to follow. Clipping 
paths are often created using Photoshop, but InDesign can do it too, when there is enough contrast 
between the image edges and the background. 

1- For example, a clipping path will be used to remove the white background from the photo of a tea set. 
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Figure 6.14 


2- To create the clipping path, select the image, then go to 
the Object menu. Scroll down to Clipping Path and 
Compt. , choose Options. 


Cuiphay Petormance , Clipping Path 


Figure 6.15 


3- In the dialog box, check Preview, 
then go to the Type menu and choose 
Detect Edges. If there are areas inside 
the silhouette of the image that should 
be clipped, check Include Inside Edges. 
Tolerance can be used to adjust the 
tightness of the fit of the path. 
Threshold is used to set the levels of 
color contrast in the image to be 
included or ignored. 


Figure 6.16 


Section-II | Working with Graphics Page 100 


Chapter 6 | Adobe InDesign-II 


4- The white background is now removed. 


6.13 Alpha Channel 


An alpha channel is an invisible channel that defines transparent areas 
of a graphic. It’s stored inside a graphic with the RGB or CMYK 
channels. Alpha channels are commonly used in video-effects 
applications. InDesign automatically recognizes Photoshop’s default 
transparency (the checkerboard background) as an alpha channel. If : E : 
the graphic has an opaque background, you must use Photoshop to 
remove the background, or create and save one or more alpha channels 
with the graphic. You can create alpha channels Background Eraser, or 
the Magic Eraser. Result of Alpha Channel and Embedded path can be 
seen in figure. 


Figure 6.17 


6.14 Importing files from Photoshop 

1- Have a layered Photoshop file ready to place. 

2- Using InDesign, choose File Place. 

3- Browse to the location of a layered image file, select the file you want to import, select the Show Import 
Options check box, and then click Open. A dialog box appears. 


Image Import Options 


Image Color Layers 
Show Layers 
® La Kelly The magazine for the 
® Shapet 
@ Covert 
'@ Backgound 


M)show Preview 


Update Link Options 
When Updating Link: Use Photoshop's Layer Visibility nal 


CK) (cancel) 


Figure 6.18 


4- Click the Layers tab and turn off and on the visibility of the layers you want to change or select a saved 
layer comp from the Layer Comp drop-down list. 


5- Click OK to close the Image Import Options dialog box. 
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After completing this section, Students will be able to: - 

¢ understand table creation, copy/paste information into tables, converting text to table and 
table to text. 

¢ understand formation of row/column, and borders 

¢ know formation of cells, text alignment, merging cells, and header cells. 

* comprehend working with tables in story editors. 


6.15 Table 

A table consists of rows and columns of cells. A cell is like a text frame in which you can add text, inline 
graphics, or other tables. You can create tables from scratch or by converting them from existing text. You 
can also embed a table within a table. 

When you create a table, the new table fills the width of the container text frame. A table is inserted on the 
same line when the insertion point is at the beginning of the line, or on the next line, when the insertionpoint is 
in the middle of a line. 

Tables flow with surrounding text just as inline graphics do. For example, a table moves through 
threadedframes when the text above it changes in point size or when text is added or deleted. However, a 
tablecannot appear on a text-on-path frame. 


6.16 Create a table 

To create a table we will use insert text option. 

1- To draw a table within an existing text frame use the Type tooland place the insertion point where you 
want the table to appear. 

2- Choose Table > Insert Table. 

3- Specify the numbers of rows and columns. 

4- If your table contents will continue on more than one column or frame, specify the number of header or 
footer rows in which you want the information to be repeated. 

5- Click OK. 

The new table fills the width of the text frame. 


6.17 Inserting Information (Text) into table 

You can add text, anchored objects, XML tags, and other tables to table cells. The height of a table row 
expands to accommodate additional lines of text, unless you set a fixed row height. You can not add foot 
notes to tables. 

1- Using the Type tool, do any of the following: 

2- Position the insertion point in a cell, and type text. Press Enter or Return to create a new paragraph in the 
same cell. Press Tab to move forward through cells (pressing Tab in the last cell inserts a new row). Press 
Shift+Tab to move backwards through cells. 

4- Copy text, position the insertion point in a cell, and then choose Edit > Paste. 

5- Position the insertion point in a cell where you want to add text, choose File > Place, and then double 
click a text file. 


Section-III | Working with tables Page 102 


Chapter 6 | Adobe InDesign-II ‘Id 


6.18 Add information (graphics) to a table 
1-Place the insertion point in the table cell into which you want to add the image. 

- Choose File > Place, and select one or more graphic files. 

- Select and drag-and-drop one or more graphic from the Graphics category in the CC Libraries panel. 
2-To place the image or images, click inside each table cell. 
Note: 
You cannot drag-and-drop InDesign snippets from the Graphics category in the CC Libraries panel. 
When you add a graphic that is larger than the cell, the cell height expands to accommodate the graphic, but 
the width of the cell doesn’t change—the graphic may extend beyond the right side of the cell. If the row in 
which the graphic is placed is set to a fixed height, a graphic that is taller than the row height causes the cell 
to be overset. 


Convert tables to text 

1-Using the Type tool , place the insertion point inside the table, or select text in the table. 

2-Choose Table > Convert Table To Text. 

3- For both Column Separator and Row Separator, specify the separators you want to use. 

4- For best results, use a different separator for columns and rows, such as tabs for columns and paragraphs 
for rows. Click OK. 


6.19 Convert text to table 

The text that needs to go in a table often already exists, usually in a tab-delimited format (meaning that the 
cells of information for the table are separated by tabs and paragraph returns). You do not need to retype 
this text into a new table; you can easily convert it into a table. To do this: 

1- If necessary, import the text into a text frame. 

2-Choose Type > Show Hidden Characters to determine how the text is currently separated Usually, you 
will see tabs between "columns" of information and paragraph returns between "rows" of information. 
Check that all the columns have the same number of tabs between them; it doesn't matter if the tab don't line 
up and the text looks messy. All that matters is consistency in the separation characters used. 

3-Select the Type tool and select the text to convert to a table. 

4-Choose Table > Convert Text to Table. 

5-In the Convert Text to Table dialog box, confirm the selections for the Column Separator and Row 
Separator. 

If necessary, you can change the separators by choosing Tab, Comma, or Paragraph from the menus or 
entering a different separation character (such as a semicolon) in the fields. 


6.20 Insert a column 

1-Place the insertion point in a column next to where you want the new column to appear. 

2-Choose Table > Insert > Column. 

3-Specify the number of columns you want. 

4-Specify whether the new column or columns should appear before or after the current column, and then 
click OK. 

5-The new cells have the same formatting as the text in the column in which the insertion point was placed 


6.21 Insert multiple rows and columns 
1-With the insertion point in a cell, choose Table > Table Options > Table Setup. 
2-Specify a different number of rows and columns, and then click OK. 
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6.22 Insert Table strokes (Border) 

1-With the insertion point in a cell, choose Table > Table Options > Table Setup. 

2-Under Table Border, specify the desired weight, type, color, tint, and gap setting. 

3-Under Stroke Drawing Order, select the drawing order from the following options: 

Best Joins 

If selected, row strokes will appear to the front at the points where strokes of different colors cross. In 
addition,when strokes such as double lines cross, the strokes are joined and the crossing points are 
connected. 


Row Strokes In Front 
If selected, row strokes appear in front. 


Column Strokes In Front 
If selected, column strokes apear in front. 


6.23 Text Alignment 

With Adobe InDesign, you can align text horizontally as well as vertically within a text frame on the page. 
Aligning text horizontally gives you the ability to justify the text to the left, center or right of the frame, 
while vertical alignment pushes text to the top, center or bottom of the frame. Use InDesign's “Text Frame 
Options” tool to achieve the text alignment that you require for your document. 


Align Text Vertically 

1. Launch Adobe InDesign. Open the document containing the text that you want to align vertically. 

2. Click the “Type” tool, which is represented by the “T” icon in the toolbar. Click on a text frame to 
highlight the item. Alternately, click the “Selection” tool, represented by the bar icon in the toolbar, and 
then select and highlight the text in a text frame. 

3. Click “Object” in the main menu. Select “Text Frame Options” from the context menu to open the Text 
Frame Options dialog. Locate the “Vertical Justification” section in this box. 

4 Click the “Top” option to vertically align the text from the top of the text frame. Select the “Center” 
option to vertically align text in the center of the frame. Choose the “Bottom” option to align the text from 
the bottom of the frame. To evenly space text lines between the top and bottom of the frame, click the 
“Justify” option. 

5 Click the “OK” button to save your changes. 

Align Text Horizontally 

1 Select the text frame with the "Type" tool or "Selection" tool from the toolbar. 

2 Click the button for the preferred alignment from the options in the “Control” or “Paragraph” panels. 
Select from any of the standard horizontal alignment options of “Align Left,” “Align Center” and “Align 
Right.” You can also use the text alignment and justification options to align and justify text. Options 
include “Left Justify,” “Center Justify,” “Right Justify” and “Full Justify.” Additional options include 
“Align Toward Spine” or“Align Away From Spine” to align the text flow toward or away from the spine 
edge of the page. 

3 Click “OK” to save your changes. 

Merge Cells 

You can combine two or more cells in the same row or column into a single cell. For example, you can merg 
the cells in the top row of the table to create a single cell to be used for the table title. 

1- Using the Type tool , select the cells you want to merge. 

2- Choose Table > Merge Cells. 
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6.24 Unmerge cells 

Place the insertion point in the merged cell and choose Table > Unmerge Cells. 

Header Cells 

When you create a long table, the table may span more than one column, frame, or page. You can use 
header rows to repeat the information at the top or bottom of each divided portion of the table. 

You can create Header Rows in InDesign when you insert a table: 

1-Place your cursor where you'd like to add the table 

2-Table > Insert Table 

3-Choose how many Header Rows you’d like and click OK 

Or you can convert Body Rows to Header Rows once the table has been imported into InDesign from Word 
Select the rows at the top of the table to create header rows, or at the bottom of the table to create footer 
rows Choose Table > Convert Rows > To Header 


Story Editor 
When you choose Edit > Edit In Story Editor, tables and their contents appear in Story Editor. You can edit 
tables in Story Editor. 
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Figure 7.19 


1-To expand or collapse the table in Story Editor, click the triangle to the left of the table icon at the top of 
the table. 

2-To determine whether the table is sorted by rows or columns, right-click (Windows) or Ctrl-click (Mac 
OS) the table icon and choose Arrange By Rows or Arrange By Columns. 

3-Use Layout view to modify and format the table. You cannot select columns or rows in Story Editor. 
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After completing this section, Students will be able to: - 

¢ comprehend coloring to frame and text, live corner effects, new swatch creation, and tint 
reduction 

¢ explain gradient (radial/ linear) 

¢ know use of evedropper tool to copy frame attribute 

¢ Export files in different formats. 


6.25 Color to Text Frame 

Adobe InDesign provides a number of tools for applying color, including the Toolbox, the Swatches panel, 
the Color panel, the Color Picker, and the Control panel. 

When you apply a color, you can specify whether the color applies to the stroke or fill of an object. The 
stroke is the border or frame of an object, and the fill is the background of an object. When you apply a color 
to a text frame, you can specify whether the color change affects the text frame or the text inside the frame. 
1-Select the object you want to color by doing one of the following: 

For a path or frame, use the Selection tool or the Direct Selection tool , as necessary. 

For a grayscale or monochrome (1-bit) image, click the Content Grabber or use the Direct Selection tool. 
You can apply only two colors to a grayscale or monochrome image. 

For text characters, use the Type tool to change the text color of a single word or the entire text within a 
frame. 

2-In the Toolbox or in the Color or Swatches panel, select the Formatting Affects Text or Formatting 
Affects Container to determine if color is applied to the text or the text frame. 

3-In the Toolbox or in the Color or Swatches panel, select the Fill box or the Stroke box to specify the fill 
or stroke of the object. (If you selected an image, the Stroke box has no effect.) 


6.26 Live Corner Editing 

Use Live Corner Editing 

1. Select View>Extras>Show Live Corners. 

2. Select a rectangular frame with the Selection tool. A yellow square will appear on the upper right side of 
the frame edge. 

3. Click the yellow square to enter Live Corner Editing mode. You’ll see yellow diamonds at each corner. 
4. Drag any of the yellow diamonds to change the frame’s corner effect. Dragging away from the corner 
reduces the size, while dragging toward the frame center increases the size. 

Live Corner Editing screenshot 

5. Hold the Shift key while dragging to change the radius of a single corner. OPT-click (ALT-click on a PC) 
on a yellow diamond to toggle among the available corner shapes. 

When you’re done editing the corner, click away from the frame to exit Live Comer Editing mode, and the 
yellow squares will disappear. 


6.27 Swatches panel overview 

The Swatches panel (Window > Color > Swatches) lets you create and name colors, gradients, or tints, and 
quickly apply them to your document. Swatches are similar to paragraph and character styles; any change 
you make to a swatch affects all objects to which the swatch is applied. Swatches make it easier to modify 
color schemes without having to locate and adjust each individual object. 
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Create color swatches 
1- Choose New Color Swatch in the Swatches panel menu. 


2- For Color Type, choose the method you’ll use to print document colors on a printing press. 


3- For Swatch Name, do one of the following: 


If you chose Process as the color type and you want the name always to describe the color values, make sure 


that Name With Color Value is selected. 


If you chose Process as the color type and you want to name the color yourself, make sure that Name With 


Color Value is deselected, and type a Swatch Name. 
If you chose Spot, type a Swatch Name. 


4-For Color Mode, choose the mode you want to use in defining the color. Avoid changing the mode after 


you define a color. 
5-Do one of the following: 


Drag the sliders to change the color values. You can also enter numeric values in the text boxes next to the 


color sliders. 
For spot colors, choose from color libraries in the Color Mode menu. 


6-If an out-of-gamut alert icon appears, and you want to use the 
in-gamut color closest to the color you originally specified, click the 
small color box next to the alert icon.7-Do one of the following: Click 
Add to add the swatch and define another one. Click Done when 
finished.Click OK to add the swatch and exit the dialog box. 
(Referrence present in Figure 6.20) 


6.28 Gradient 


A gradient is a graduated blend between two or more colors or tints of 
the same color or different colors. You can use gradients to create color 
blends, pie-charts, add volume to vector objects, and adda light and 
shadow effect to your designs. 

Linear gradient 

Indesign shades from the starting point to the ending point in a straight 
line. 

Radial gradient 

Indesign shades from the starting point to the ending point in a circular 
pattern. 

Angular gradient 

Indesign applies a fill with color gradients that sweep around a shape 
from the center of a circle. 

Example of Gradients can be seen in figures below: 


Figure 6.21: Radial Gradient 
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Swatches 


[None] 

[Registration] 

[Paper] 

[Black] 

C=87 M=38 Y=0 K=0 
New Gradient Swatch 2 
C=0 M=100 Y=0 K=0 
C=0 M=0 Y=100 K=0 
C=75 M=5 Y=100 K=0 
C=15 M=100 Y=100 K=0 
C=100 M=44 Y=69 K=0 
C=100 M=100 Y=100 K=100 
C=1 M=0 Y=0 K=0 
R=237 G=69 B=69 


H=200 S=100 B=78 


Figure 6.20 


Figure 6.22: Linear Gradient 
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No Angle Rotation Angle 


Figure 6.23: Angular Gradient 


6.29 Tints 

A tint is a screened (lighter) version of a color. 
Tinting is an economical way to make additional 
spot color variations without having to pay for 
additional spot color inks. Tinting is also a quick 
way to create lighter versions of process colors, 
although it doesn’t reduce the cost of printing 
process colors. As with non-tinted colors, it’s best to 
name and store tints in the Swatches paneso that you 
can easily edit all instances of that tint in your 
document, Referrence in figure. 

Create and edit tints 

You can adjust the tint of an individual object, or Figure 6.24 

create tints by using the Tint slider in the 

Swatchespanel or Color panel. The tint range is from 0% to 100%; the lower the number, the lighter the tint 
will be. 

Because colors and tints update together, if you edit a swatch, all objects that use a tint of that swatch 
update accordingly. You can also edit the base swatch of a named tint using the Swatch Options command 
in the Swatches panel menu; this updates any other tints based on the same swatch. 

Create a tint swatch using the Swatches panel 

1- In the Swatches panel, select a color swatch. 

2- Select the arrow next to the Tint box. 

3- Drag the Tint slider, and click the New Swatch button or select New Tint Swatch in the Swatches panel 
menu. 


6.30 Eyedropper 

Eyedropper tool is used to copy type attributes such as character, paragraph, fill, and stroke settings, and 
then apply those attributes to other type. By default, the Eyedropper tool copies all type attributes. To 
customize the attributes you want to copy with the Eyedropper tool, use the Eyedropper Options dialog 
box. 
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The Eyedropper tool is available only in Layout 
View. 

Copy type attributes to unselected text 

1-With the Eyedropper tool , click the text that is 
formatted with the attributes you want to copy. (The 
text can be in another open document.) The 
eyedropper pointer reverses direction, and appears 


EI ka IND: Some 


good guard, 

Until their greater p 
That are to censure 
CORDELIA: We « 
Who, with best mea 


worst. 


EDMUND :Some 
good guard, 


Until their greater p 


That are to censure 


Who, with best mea 


worst. 


EDMUND : Son 


away: good guard, 

Until their greater p 
That are to censure 
CORDELIA: We a 


Who, with best mea 


worst. 


full , to indicate that it’s loaded with the attributes 
you copied. When you position the eyedropper 
pointer over text, an I-beam appears next to the loaded eyedropper. 

2-With the Eyedropper tool, select the text you want to change. 

The selected text takes on the attributes loaded in the eyedropper. As long as the Eyedroppe tool is 
selected, you can continue to select text to apply formatting. 

3-To deselect the Eyedropper tool, click another tool. (Referrence can be seen in figure below) 


Figure 6.25 


6.31 Exporting files 

You can save all or part of an InDesign story in file formats that you can open later in other applications. 
Each story in a document exports to a separate document. 

InDesign can export text in several file formats, which are listed in the Export dialog box. The formats 
listed are used by other applications, and they may retain many of the type specifications, indents, and tabs 
set in your document. 

You can save sections of commonly used text and page layout items as snippets. 

1- Using the Type tool , click in the story you want to export. 

2- Choose File > Export. 

3- Specify a name and location for the exported story, and select a text file format under Save as 

Type (Windows) or Format (Mac OS). 

If you don’t see a listing for your word-processing application, you can save the document in a format the 
application can import, such as RTF. If your word-processing application doesn’tsupport any other 
InDesign export formats, use a text-only format. Note, however, that exportingin text-only format removes 
all character attributes from the text. 

4- Click Save to export the story in the format you’ve selected. 
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EXERCISE 
Select the most suitable option. 


1. Adobe InDesign is used to create : 
a) Newsletter b) Vectors Images c) Logo d) 3D Objects 


2. The pre-built preset workspace is : 
a) News Publishing b) Web Publishing c) Digital Publishing d) none 


3. Each Document Contains : 
a) One Layer b) Two Layers c) Three Layers d) Four Layers 


4. A Master Page is 
a) First Page b) Last Page c) Background d) None 


5. Text Formatting contains : 
a) Word formatting b) Character Formatting c) Paragraph Formatting d) B and C 


6. Text Frames Contains : 
a) Frame Grids b) Frame Patterns c) Frame Border d) Outlines 


7. Page Size refer to ‘ 
a) Publication Area b) Printing Area c) UI Design d) Resolution 


8. Each Document has a 


a) Disclosure Triangle b) Disclosure Circle c) Disclosure Square d) None 
9. Objects on Masters Appear At the of each layer. 
a) Top b) Middle c) Bottom d) None 


10. Character Styles Allow you to save and re-use specific : 
a) Text Formatting b) Font Face c) Font Style d) Font Color] 


11. Paragraph Formatting Allow you to Save and re-Use 


a) Tabs b) Indents c) Font Styling d) A and B 
12. Tool is used to select individual points on a path 
a) Selection Tool b) Direct Selection Tool c) Position Tool d) None 


13. Objects on Master Page will appear on : 
a) First Page b) Last Page c) All Pages d) none 


14. Merging Master Items will move master items 
a) Behind Document Page Object b) On Top of The First Layer 
c) Behind Second Layer d) None 
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15. A paragraph in InDesign is any text that ends with : 
a) Full Stop b) Hard Return c) Question Mark d) Semi Colon 


Answer the following questions briefly. 

1.What are tints and Gradients? Differentiate. 

2. What are different File Formats that Indesign can support? 
3. Which paragraph styles are present in adobe InDesidgn? 
4. Which character styles are available in InDesign? 

5. What do you mean by color to text frame in InDesign? 

6. Define gradient, How many types of gradients there are? 


Write answers of the following questions in detail. 
1. What is Adobe InDesign ? Explain it’s workspace. 
2. What are different Paragraph and Character Styles and also name them? 


ACTIVITIES 


1. Design a 10 pages fashion magazine by using different style, text, and format. 
2. Design a magazine by customizing the link panels, locate missing images, and adding. 
3.Design a table of content for a book. 

4. Make a colorful magazine keeping in mind color harmony. 

5. Create a Workspace in Indesign. 

6. Edit Corners of a Square using Live Corners. 

7. Create a Color Swatch of five different colors. 

8.Create a Table and merge two cells. 

9.Use eyedropper tool to copy a style of frame. 

10.Make different color gradients. 

11.Export files in different formats. 
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Freelancing 


After completing this section, Students will be able to: - 


¢ define freelancing 
¢ understand importance of freelancing 
¢ enlist top freelancers worldwide in graphic designing and media production 


7.1 Freelancing 

Freelancing means to work as an independent company or professional rather than be employed by someone 
else. Freelancers are self-employed and often referred to as independent contractors.Freelancers are hired by 
other companies on a part time or short-term basis. 


7.2 Importance of freelancing 

Following is the importance of freelancing: 

Freelancing is one of the most rewarding things you can ever do. It brings a lot of freedom, and 
control over one’s own destiny. It’s also incredibly challenging, but, nothing beatsyour own 
business. If you think about Freelancing but something holds you back. 

1. You Are Your Own Boss 

Being a freelancer you are your own boss. You don’t need to work under anyone or follow anyone’s 
instruction. You have control over your working life and can do work anytime according to your 
ease/schedule. 

No more office politics, bad colleagues or annoying people to deal with. Only you,your slippers and 
2. No Office Politics 

A nice cup of tea — all at home in your home office. You do not have to worry about attracting 
attention and competing with colleagues. You are alone and that’s just great. 

3. You Make Decisions 

Do you want to change the look and feel of your website? You can. Would you like to decide with 
which clients you would like to work? You can. As a freelancer, you can make all decisions. You are 
in control. 


4. You Can Always Do What You Want 
Freelancing brings a wealth of freedom, if that’s important to you. No one can tellyou what to do and 
no one can stop you from doing anything. You can work as freely as you like. 


7.3 Freelancing as a top rated seller 

We will use an example of one of the most used freelancing website, www.fiverr.com. In order to 
be a top rated seller you need to fulfill following requirements: 

* Be an active seller for at least 180 days. 

* Complete at least 100 orders (all time) 

¢ Earn $20,000 or more. 

¢ Maintain a 4.7-star rating over 60 days. 
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* Deliver a 90% response rate score over 60 days. 
* Score a 90% order completion rate over 60 days. 
¢ Achieve a 90% on-time delivery score over 60 days. 


There are many Top Rated sellers on the platform, their name and niche is describedbelow (right 
current/ updated top rated sellers: - 

1- Anniejenkinson is an outstanding editing for authors. 

2- Alinaserv is a professional flyer and book cover designer. 

3- Gringlue is a professional flyer, brochure and social media designer. 

4- Mk_sanwal is a top rated logo designer. 
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After completing this section, Students will be able to: - 
° define offline freelancing 

¢ define online freelancing 

¢ describe platforms of freelancing 


7.4 Offline vs Online Freelancing 

There are two main approaches to doing your freelance business. Location-based in the 
physicalenvironment (offline) or online purely digitally. By online freelancing, It means the type 
of work thatyou can do purely remotely e.g your home offices starting from finding clients to 
executingthe work and getting paid. LinkedIn and other professional platforms as well as freelance 
sites such as Fiverr, Upwork, or PeoplePerHour make online freelancing possible. 

Offline freelancing is the type of work that you would typically do in the physical world, 1.e. 
meeting clients for coffee and lunch, going to meetings, perhaps even doing the work in the 
client’s location too. 

In this brief comparison, | list the differences as a guy who has done both kinds of businesses. 
Several aspects affect how each type of business needs to be run, what potential they offer, and 
what risks are involved. 


7.5 Difference between online and offline freelancing. 
Difference between Online and Offline freelancing is described in table below: 


Online Offline 


Marketing Requirements Online Presence Networking skills 
Speed of getting contracts Hours or days Days or weeks 


Competition Global, tough Local, easy 
Required expertise Very high High 

Skillset type Specialist Generalist 
Payscale maximum Global top pay Local top pay 


Table 7.1 


7.6 Best Freelance Platforms 

Freelance platforms help companies find and hire independent professionals for temporary job 
roles or special projects. These platforms offer a marketplace for businesses to browse profiles 
of freelancer candidates based on skills, experience, location, or other criteria. Alternatively, 
companies can also post a project description and solicit proposals from freelancers. These 
capabilities help companies of all sizes outsource work on projects that require specialized 
skills or additional man power, freeing up full-time employees to focus on other business 
activities. Some platforms focus on sourcing freelancers with certain skills, such as writing, 
design, or programming, while others provide marketplaces for professionals with a wide 
variety of skills. Following are some of the most popular freelancing platform: 
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Upwork is the world’s largest work marketplace 
connecting million of business with independent talent 
around the globe. We serve everyone from one-person 
start-ups to 30% of the Fortune 100 with a powerful 
trust-driven platform that enables companies and 
freelancers to work together in new ways that unlock their 
potential. Our talented community earned over $2 billion 
on Upwork in 2019 across more than 8,000 skills, 
including website and app development, creative writing, 
design and customer support etc. 


Fiverr concept of a marketplace that would provide a two 
sided platform for people to buy and sell a variety of digital 
services typically offered by freelance contractors. Services 
offered on the site include writing, translation, graphic 
design, video editing and programming etc. Each service 
offered is called a "gig". Fiverr's services start at US$5, and can 
go up to thousands of dollars with gig extras. 


Freelancers is the world's largest freelancing and 
we "Cs crowdsourcing marketplace by number of users and 
projects. Itconnect over 55,493,150 employers and 
freelancers globallyfrom over 247 countries, regions and 

territories. Through marketplace, employers can _ hire 


freelancers to do work in areassuch as software development, 


» writing, data entry and design right through to engineering, 
the sciences, sales and marketingaccounting and legal 


services. 
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After completing this section, Students will be able to: - 
¢ understand about portfolio 


¢ know about creating Facebook pages/ Instagram account/ Bedance profile / 
Flicker profile 


7.7 Portfolio 

A portfolio is a purposeful collection of a person’s work that exhibits a person’s effort, 
progress, achievements and competencies. 

A portfolio for a freelancer may include a reflective account of a practice placement, 
presentation, learning experience or group experience. The person is able to: 

* Accumulate and store evidence (in 
one central online area) of the 
many transferable skills persons 
develop. 

* Self assess and monitor their own 
learning development. 

* Develop and present a portfolio of 
work or reflective account on an 
aspect of person’s learning as part 
of course assessment. 

¢ Build a resume for employment applications and as evidence of learning achievements 
for a professional body. 

* Apply for jobs by showing evidence of relevant work experience and suitable 21st 
century skills. 

* Wecan referr the below figure as an example of portfolio: 


Augusto Garcia 


Sr. Product & UX Designer 


thoroughly e 
product life-cycle. My main goal is to create 
products that look beautiful and function 


intuitively for the user. 


7.8 Creating Social Accounts 

Facebook 

Before you can sign up for your Facebook Business Page, you need to log into your personal 
Facebook account. Don’t worry—the information from your personal account will not be 
publicly visible on your business Page. 

Step 1: Sign up 

Go to facebook.com/pages/create. 

Enter your business information in the panel on the left. As you do so, the page preview will 
update in real time on the right, as can be seen in figure below: 
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@ a ft & 


Pages » Create a Page 


e 
Create a Page 
Page Information 
nae [requred 
Olat's Large Sandwich Shop i) 
Use the name of your business, brand or 


organization, or a name that explains what 
the Page is about. Learn More 


Category (required) 


Choose a category that describes what 
type of business, organization or topic the 
Page represents. You can add up to 3. 


“iN V\\\ 


Description Olaf's Large Sandwich Shop 
Category 
Home About Photos More wh Like OMessage Q = 
About 
© Description 
You can add images, contact info and 
other details after you create the Page 
& 
Figure 7.2 
F b A h Category (required) 
or your page name, use your business name or the name ‘ighidspan aise) (Wancainank% 

people are likely to search for when trying to find your ai 
business. . 
For category, type a word or two that describes your business Cafe 
and Facebook will suggest some options. You can choose up to cuneints 
three of the suggestions, refer to image. cies 

Pet Cafe 

Beauty, Cosmetic & Personal 

Care 

Day Care 

UU Gall euu Hellegers, LUIrMeLi BU atu 
Figure 7.3 
Description 


Next, fill in the Description field. This is a short description 
that appears in search results. It should be just a couple of 
sentences (maximum 255 characters). 

When you’re happy with your description, click Create Page. 
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A friendly neighborhood cafe serving 
the largest, most generously sized 
sandwiches in Los Angeles. 


Write about what your business does, the 
services you provide, or the purpose of 
the Page. 


Character limit: 255 


You can add images, contact info and 
other details after you create the Page. 


Create Page 


Figure 7.4 
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Instagram 

Unlike other social networks, posting content on soe ad 
Instagram can only be done using the mobile app. = = 

So step 1 is to pull out your smartphone, find : 
Instagram in your app store and download. 

Note: We’re using iPhone screenshots throughout 


this post, but the layout should look almost the 
same on Android devices. 


Corsican = Gycncse — Ghamrad cor 


2. Create an account using an email address while Bowens rests diwielritlylulilolp 
it might seem easiest to use your personal | / alsid fa hii k |! 
Facebook account...don’t do it! That will create / | BBCCGRD 
an account based on your personal Facebook page. — os - = 
Since this is for your business, you should use Figure 7.5 


your business email address. 


3. Instagram profile 

If you’re setting up Instagram for a company, the username should be the company’s name, or 
as close as you can get it. If you’re a real estate agent, insurance agent, or the like, choose a 
variation of your name, business, location. You need something that distinguishes you from a 
personal account. 

For example, janejones NYC _ realtor or janejones_insta will work. 


—~—F ooraw me “er od -™ wore oat me 


Name and Password Welcome to Instagram, Change Username 
Add yom NAME LO Mende Car Hd yo TESTUSER2018 Ped a uneenerre to pur acomet Feu 
SSS Sw 
Figure 7.6 
4. Picking the right profile photo es 
Picture time! Your profile picture will be your 
logo or something recognizable that’s associated Ati Prete Pctre 


Oh ote ey ee tee me 


with your brand if you don’t have a logo. am 
Remember, this is your Instagram business SS 
account, not a personal page. Avoid the selfies or 

group pics. If you’re the face of your business, 

use a professional headshot you like or take a new 

one. 


Figure 7.7 
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After that, you'll see a page with suggested accounts to 


follow. You don’t have to follow any of them — and you al mi pm 
shouldn’t if they don’t fit your strategy. For example, =“ 
don’t follow Entertainment Weekly if you’re setting up a Se C= 
business account for a real estate company. Click . 
“Done” in the top right corner to move to the next step. 40) yy famwuntte aot == 
A® Suggestions 
O=- m~ 
xy sine afticsat © Ce 
ee 
Sign up for Flickr PR po aan =. 
First name 
Figure 7.8 
Last name 
Your age | Flickr 


What is flickr for freelancers ? 

1- Go to our sign up page. 

2- Enter your information. 

3- Click Sign Up. 

4- Check your email for a Verification Link. 
5- Click Confirm my Flickr account. 

'm not a robot 6- Sign in to your account. 


Email address 


Password 


By signing up, you agree with Flickr's Terms of 
Services and Privacy Policy. 


Already a Flickr member? Log in here. 


English v Help Privacy Terms 


Figure 7.9 
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After completing this section, Students will be able to: - 
¢ learn about creating profile on different freelancing platforms 
¢ understand gig creation in Fiverr 

¢ understand Niche selection 

¢ understand the process of bidding 


7.9 Signing Up on Freelancing Platform 


1. From Fiverr's homepage, click Join. 


Fiverr Business Explore & Engiish Rs PKR Become sSeller Simin Join 


Find the perfect /reelance 56 


services for your business 
al 


[ 


Figure 7.10 
Join Fiverr 


eo Continue with Facebook 


G Continue with Google 


¢ Continue with Apple 


2. Enter your email address and click Continue. 
OR 


By joining | agree to receive emails from Fiverr 


Already a member? Sign Ir 


Figure 7.11 
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Note: You can also join with Facebook, Google Connect, and Apple Connect. 

3. Choose your username! 

Notes: 

- Once you've successfully created your account, your username can't be changed. 

- Your username is your display name (and is within your Fiverr URL), so think long and hard, 
and choose wisely! 

4. Choose your password and click Join. 

5. You are now registered on Fiverr! Please check your registered email address as you will 
receive an email to activate your account. 

Note: The activation link in the email is only valid for 30 days. 

6.Within the activation email you receive from Fiverr, click Activate Your Account. 


7.10 Choosing a Niche/Field to work on 


1. Find All Your Skills 

To get started, first write down all the skills in which you’re an expert. You can get help from 
your friends and family members too. There must be many skills in which you’re an expert but 
you may not know about it. 

All you have to do is just to find out all these untapped skills. 


2. Competition Level 

Now, you have a list of skills that you can offer to your clients on Fiverr. It’s time to check 
which one will perform best and which not. To check this, you have to analyze the competition 
level for every particular skill. 

You have to check whether a Gig on this skill will rank higher in search results or not. If there 
are too many Gigs to that particular niche then the competition would be high. 


3. Trend 

Now it’s time to check if the keyword that you picked will work for a long time or not. This 
step is also very important to clear before starting a gig. To clear this point, you can analyze 
how many reviews popular gigs have and the number of orders in queue. 

More reviews and more order in the queue means this keyword is trending and you can start 
here. More accurate results you get for the Fiverr niche. 


7.11 Creating a gig on Fiverr 
Although Fiverr has an iOS app, gig creation can only be completed using a computer. The 
fiverr mobile app doesn’t have a built-in feature for gig creation. So you need to log in into 
your Fiverr account using a computer. 
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Step #1: On your Fiverr homepage, click on Selling and then on Gigs. 


Search Community Messages Selling Buying ‘ 
= = F Orders 
Voting & Translation Video & Animation Music & Audio Programming & bagi m& Lil 
=e 
Analytics 


Eamings 


Power Up With Fiverr Pro. \” aoe 


~ 


Go next-level with world-class talent & VIP support 


Step #2: Click on create a new gig 


Gigs Accepting Custom Orders Cc ) 


ACTIVE GIGS 


Figure 7.12 


If you’ve not created one, you’ll be prompted to do so. Click on ‘create a new gig’, found at the 
top-right corner. 


Step #3: Create a Gig title, select category and meta tags. 


oO Overview 


re ree 


Figure 7.13 
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Step #4: Set your gig pricing. 


——“« Untock your potential 
revenue win aif 3 Packages 


Revtcea tee 
oe “ He 


ly Gig Extras 


<> Fore laet ppivery 


= Acccora! Reupon 
Figure 7.14 


Your gig pricing has a base price of $5 and can be set to as high as $995. Also, you can unlock 
other packages for the same gig. If you wish to, click on ‘Try Now’. 


BASIC STANDARD PREMIUM 


% 


Name your package # Name your package # Name your package 


Describe the details of .« Describe the details of . Describe the details of ¢ 


your offering your offering your offering 
Delivery Time ba Delivery Time . Delivery Time - 
Select Select 7 Select _ 
$5 - $995 r $5 - $995 i $5 - $995 _ 
Figure 7.15 
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With the Standard and Premium package unlocked, you can set a different prices for all the 
same gigs, depending on the extra services you want to render. 

For instance, if your basic plan is set at 5 dollars, and the delivery date is set at 3 days, you 
could decide to set your standard price to $10, for a two days delivery. 

Your gig revisions are the number of times you intend to revise the finished work, should in 
case a buyer complains and requests for a review. 

Depending on your Category and Sub-category, other options may be provided in your gig 
pricing. 

Step #5: Add photos or a video to your gig 


OD ivwee + Greve « OOmceanthAe » Olesen Ou »- Qa: 


@ ovine + Borers + Howereestas + Oeics » Gooey » Oraw 
Description Gig Protas Upteec oteton Mant Ceacete or ae eited pos OG 
ety Oeste You Cg 
‘Benet 
De ISR Ate s emrers tg Soelty rides Tat tedt shomcases your Og eters 
Twem woos wees wore mar TS pecores 
F ntly A 4 Questions art erator tat CNS 
Ado Quesnens 6 Anpres for You Duper one 
ave hk Doone Bip POF S wre ony reccemmers ntang 2 POF Ge 8 tether comes he berets you wm be preweng 
Figure 7.16 “Seoas 
Step #6: Publish your gig. Figure 7.17 


@ overview > @ Pricing > t~] Description& FAQ >» tv) Requirements »> @ Gallery > Q Pubiish 


Almost There... 


Let's publish your Gig and get 
some buyers rolling in. 


Publish Gig 


back 


Figure 7.18 
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EXERCISE 


Select the most suitable option. 
1.Who is a freelancer? 


a) Owner of a Company b) Self Employed c) Businessman d) Employee 
Ze is a Freelancing Platform: 
a) Facebook b) Youtube c) Upwork d) Whatsapp 


3. A Portfolio is a person’s: 
a) Background b)WorkExperience c) Personal Detail d) None of these 


4. Most important soft skill to become a freelancer is: 
a) Communication b) Shopping c) Harvesting d) Driving 


5. What could be the possible opportunities for being a freelancer ? 
a) Get a Carrier as an Employee b) Make Money 
c) Health Benefits d) none of these 


6. Which of the following should be included in your freelancer profile ? 
a) Your Skills b) Friends’ Name c) Father’s Name d) Education 


7. Which of the following is not compulsory for work-life in freelancing ? 
a) Work b) Staying Healthy c) Overcommit d) Go Out 


8. What helps the employer understand that you are good at your skills ? 
a) Portfolio b) Profile Description c) Education history d) None 


9. Which of the following is irrelevant for profile creation ? 


a) Picture b) Video ¢) CNIC d) Profile Description 
10. Usually, in freelance marketplaces feedback varies from | to : 

a) 2 Stars b) 4 Stars c) 5 Stars d) 7 Stars 

11. Platform enables freelancer to post his/her service as a gig that enables thecustomer to buy 
his/her services: 

a) UPwork b) Guru c) Fiverr d) Freelancer 


12. Fiverr gig usually starts at the price of : - 
a) 5 Us Dollar b) 10 US Dollar c) 15 US Dollar d) 20 Us Dollars 


13. Which of the following is NOT a freelance platform? 
a) Facebook b) Upwork c) Fiverr d) Freelancers 


14. You can post on Instagram using only: - 
a) Mobile Phone b) Laptop e) PC d) Tablet 
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15. One of the requirement for the top seller on fiverr is to be active for at least: - 
a) 10 Days b) 50 Days c) 180 Days d) 100 Days 


Answer the following questions briefly. 

1. What is Freelancing ? 

2. What are requirements for top rated seller on fiverr? 
3. Define offline and online freelancing. 

4. Describe portfolio in freelancing. 

5. What steps are involved in creating a fiverr account? 
6. What steps are involved in choosing a Niche? 

7. How do you create a gig on fiverr? 


Write answers of the following questions in detail. 
1. Define freelancing. Also describe importance of freelancing. 
2. What are the important platforms available forfreelancing now a days ? Explain atleast 3. 


ACTIVITIES 


1. Visit the profiles of top-rated freelancer and make a report about their portfolio 

(name, skills, earning, star). 

2. Prepare a list of top Freelancers worldwide in graphic designing and media production . 
3. Presentation on types of freelancing 

4. Create gigs on Fiverr. 

5. Create a fiverr account and deploy a gig. 

6. Create a Niche about your skills. 
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After completing this section, Students will be able to: - 


¢ define entrepreneurship 


¢ know key concepts of entrepreneurship 
¢ understand main component of entrepreneurship 


¢ learn types of entrepreneurship 


8.1 Entrepreneurship 

An entrepreneur is an individual who creates a new business, bearing most of the risks and enjoying 
most of the rewards. The process of setting up a business is known as entrepreneurship. The 
entrepreneur is commonly seen as an innovator, a source of new ideas, goods, services, and 
business/or procedures. Entrepreneurs play a key role in any economy, using the skills and initiative 
necessary to anticipate needs and bringing good new ideas to market. 

Entrepreneurship that proves to be successful in taking on the risks of creating a startup is rewarded 
with profits, fame, and continued growth opportunities. Entrepreneurship that fails results in losses 
and less prevalence in the markets for those involved. 


8.2 Key concept of Enterpreneurship 


Key concepts of enternreneurship are dicussed below: 


Innovation 

An entrepreneur is the key source of innovation and variation in an economy. It is actually one of the 
most important tools of an entrepreneurs success. They use innovation to exploit opportunities 
available in the market and overcome any threats. 

So this innovation can be a new product, service, technology, production technique, marketing 
strategy, etc. Or innovation can involve doing something better and more economically. Either way 
in the concept of entrepreneurship, it is a key factor. 

Risk-Taking 

Entrepreneurship and risk-taking go hand in hand. One of the most important features of 
entrepreneurship is that the whole business is run and managed by one person. So there is no one to 
share the risks with. 

Not taking any risks can stagnate a business and excessive impulsive risk-taking can cause losses. So 
a good entrepreneur knows how to take and manage the risks of his business. But the willingness of 
an entrepreneur to take risks gives them a competitive edge in the economy. It helps them exploit the 
opportunities the economy provides. 

Vision 

Vision or foresight is one of the main driving forces behind any entrepreneur. It is the energy that 
drives the business forward by using the foresight of the entrepreneur. It is what gives the business 
an outline for the future the tasks to complete, the risks to take, the culture to establish, etc. 
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All great entrepreneurs of the world that started with an entrepreneurship business are known to have 
great vision. This helps them set out short term and long term goals for their business and also plan 
ways to achieve these objectives. 

Organization 

In entrepreneurship, it is essentially a one-man show. The entrepreneur bears all the risks and enjoys 
all the rewards. This requires a lot of organization and impeccable organizational skills. 

An entrepreneur must be able to manage and organize his finances, his employees, his resources, etc. 
So his organizational abilities are one of the most important elements of entrepreneurship. 


8.3 Types of Entrepreneurship 
Here are the different types of entrepreneurship: 
1- Small business entrepreneurship 

2- Large company entrepreneurship 

3- Scalable startup entrepreneurship 

4- Social entrepreneurship 

5- Innovative entrepreneurship 

6- Hustler entrepreneurship 

7- Imitator entrepreneurship 

8- Researcher entrepreneurship 

9- Buyer entrepreneurship 
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After completing this section, Students will be able to: - 
¢ know how to identify business opportunity 
¢ understand how to develop feasibility and business plan for startup 


8.4 Ways to identify more business opportunities 

1. Listen to your potential clients and past leads 

When you’re targeting potential customers listen to their needs, wants, challenges and frustrations with 
your industry. Have they used similar products and services before? What did they like and 
dislike? Why did they come to you? What are their objections to your products or services? 

This will help you to find opportunities to develop more tailored products and services, hone your target 
market and identify and overcome common objections.This valuable customer information will help 
you identify key business opportunities to expand and develop your current products and services. 


2. Look at your competitor 


: a : , Do you know ? 
Do a little competitive analysis (don’t ; : 
let it lead to competitive paralysis A startup resists the temption of splasout on fancy 
though) to see what other startups are offices, expensive equipment and over-the-top 
doing, and more importantly, not doing? marketing. 
Where are they falling down? What are 


they doing right? What makes customers go to them over you? 

Analysing your competitors will help you identify key business opportunities to expand your market 
reach and develop your products and services.s 

3. Look at industry trends and insights 

Subscribe to industry publications, join relevant associations, set Google alerts for key industry terms 
and news and follow other industry experts on social media.Involve yourself in your industry and 
continually educate yourself on the latest techniques and trends. 


8.5 Development of Feasibility and Business Plan. 

1. Create a strong unique brand 

Your business needs to stand out and a strong brand is integral to this. As part of this you’ll need to 
check that your business name doesn’t conflict with another business. To do so, check the free online 
registeratioins provided by the Intellectual Property Office. 

2. Have a business plan 

A business plan helps you organise your ideas, clarify goals and ensure you have all of your bases 
covered. It will also improve your chances of success. Your plan should be an evolving document that 
grows with your business. 

3. Know your unique selling points and capitalise on them 

Unique Selling Points (USP) are things that differentiate your business from its competitors, such as an 
exclusive product or exceptional serviceThese USPs provide a solid foundation for your business, 
giving you a competitive advantage that can be promoted in your marketing and potentially justifying 
larger profit margins. 
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4. Budget for ongoing costs 

As a business owner, it’s important that you have an intimate understanding of the figures. When 
creating budget, explore different options for fixed and variable costs and ask other experienced owners 
for advice. Putting together a detailed, accurate cost budget takes time and money but is hugely 
valuable. 

5. Measure, don’t assume, demand 

You'll need to find out which segments of the market respond most positively to what you’re selling 
Research their purchasing habits and understand why your offering appeals to them more than others. 
Once you know this you can target these types of clients. 
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After completing this section, Students will be able to: - 


¢ learn about concept of marketing and marketing mix 
¢ understand 6 Ps of marketing 
* calculate costing and pricing 


8.6 Marketing vs Marketing Mix 
Both Marketing and Marketing Mix play distinctive roles in governing the marketing of products. The 
marketing strategy is structured to develop a cost-effective way to generate sales and carve a 
sustainable competitive position for the company’s brands and products wherever they are sold. The 
product marketing mix becomes the strategic tool to focus on developing best practices and tactics to 
achieve market place success. 

Marketing Mix 

If you consider one component to be the boss and the other the employee, the marketing strategy 
wouldbe the boss and the marketing mix would be the employee. The objectives and goals in the market 
in strategy define and set measurable results that the company wishes to achieve for the entire range 
ofbrands and services that it provides. This information is then used to develop a focused, strategic 
marketingmix to deliver the desired results. 
Marketing 


The marketing strategy defines goals for the Go f ki ae : f 
entire scope of products or services that a 0) FOL een OnsIne “ies pet just aor New 


company provides to consumers and clients. business opportunities:It can be a wonderful 


The strategy establishes how brands and source of support and fresh idead. 
services will be positioned in the market place 
and identifies target consumers, clients and distribution channels to achieve sales. 

It establishes the communications platform used for advertising and promotions. For example, a 
marketing strategy for a laundry detergent company might use research findings to claim that their 
brand gets outtough grease stains better than the other brands. The company could then use the claim 
to develop the advertising messaging strategy for commercials to generate preference for the 
company’s brands versus competitors. 


Do you know ? 


8.7 6 P’s of Marketing to Grow Your Business 

Here are the 6 P’s of marketing and how does these help sales? 

Product: The product is what is being sold. Fulfilling a market opportunity with a timely product that 
meets customers’ needs will help boost sales. 

Price: The price is the cost the customer pays to acquire the product. An effective pricing strategy 
ensures that customers are willing to buy the product, generating sales for the company. 

Place: The place is where customers can buy the product. Whether a brick-and-mortar store, website, 
or app, proper placement of products creates sales opport-unities. 

Promotion: The promotion includes all the tactics used to communicate a product’s value. The goal of 
promotion is to attract a customer’s attention and foster interest in learning more about — and 
eventually buying — the product. 


Section-III | Marketing and Marketing Mix Page 131 


Chapter 8 | Entrepreneurship “Cy- 


People: The people are the individuals involved in the marketing process on both sides of an exchange. 
Employees such as salespeople and customer service repre-sentatives influence how customers view a 
business or product, and customers provide feedback to improve the product. This interaction between 
internal and external people helps determine success. 

Presentation: The presentation is how the product appears in the market. Customers’ opinions of how 
a product is presented (for example, through packaging and messaging) can impact their buying 
decisions. 


Calculating Costing and Pricing 

Common business expenses 

The first step is to make a list of all the purchases you’ Il need to make in order to start operating. 
Categorize your list into expenses that are one-time purchases and those that will be ongoing payments, 
since both will factor into your calculations.Here are some of the most common expenses in both 
categories: 

One-time expenses 

1- Necessary equipment like a cash registers, machinery, or vehicles 

2- Incorporation fees 

3- Permits and licenses, such as city, county, and state licensing, or those related to your specific 
industry 

4- Computer or technology equipment 

5- Down payment for your office or store 

6- Initial business cards 

7- Initial inventory 

8- Initial office supplies 

9- Technology, such as computers, tablets, or printers 

10- Signage 

11- Office or business furniture 


Variable expenses Fixed expenses 

1- Inventory 1- Lease or mortgage 
2- Payroll 2- Insurance 

3- Shipping 3- Utilities 

4- Packaging 4- Administrative costs 
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Select the most suitable option. 

1. People who own, operate and take risk of a business venture are called: - 

a) Business Incubator b) Employee c) Entrepreneurship d) Entrepreneur 

2. Which one is Not a disadvantage of Entrepreneurship ? 

a) Risky b) Uncertain Income c) You are the boss d) Work long hours 
3. Which one is Not a advantage of Entrepreneurship ? 

a) Can you a business of interest b) You can be creative 

c) Make a lot of money d) You will make decisions alone 

4. What type of entrepreneurial business actually produce the product they sell ? 

a) Manufacturing b) Wholesaling c) Retailing d) Service 

5. Which of the following is Not required to grow a business ? 

a) Product b) Price c) Place d) Practice 

6. Which one is Not a problem loving method: 

a) Define the problem b) Gather the information c) Identify the solutions d) Ignore the problem 
7. What is the fixed cost ? 

a) The cost that goes up and down b) The cost that remains the same 

c) Measure the disadvantage of production d) Measure the advantage of production 

8. What is opportunity cost ? 

a) Going with your first option b) Going with the easiest option 

c) Choosing the best alternative d) none of the above 

9. All are the typical structure for a business plan except: - 

a) Executive summary b) Financial plan c) Borrowing plan d) Operational plan 
10. An entrepreneur has the many personal characteristics except ? 

a) Self-contained b) Goal oriented c) Creative d) Overambitious 
ibe is one among the factors that influence entrepreneurship 

a) Life path circumstance —_b) Economic growth c) Inheritance d) Desire 

12. Brainstorming new ideas with others is called: - 

a) a tasking activity b) a creative activity c) an examination d) all of the above 
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Answer the following questions briefly. 

1. Define Entrepreneurship. 

2. What are key concepts of Entrepreneurship? 

3. Name different types of Entrepreneurship. 

4. What is marketing Mix? 

5. Define Marketing. 

6. What are different Business Expenses? 

7. Write three differences of Marketing and Marketing Mix. 


Write answers of the following questions in detail. 
1. Discuss different ways to identify more business opportunities. 
2. What steps are involved in developing a feasible business plan for startup? 


3. Elaborate 6 P’s of Marketing. 


ACTIVITIES 


1. Design a business plan keeping in view skills of cosmetology. 
2. Develop a marketing strategy for your business model developed in previous activity. 
3. Group discussion on entrepreneurship 
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